javascript - Konfigurera ett Typescript-projekt för att transpileras från ES6 till ES5 med Bable

Jag håller precis på att starta ett nytt projekt och jag vill verkligen använda Async och Await-grejerna som nyligen släpptes för TypeScript.

Men det fungerar bara (just nu) om du riktar in dig på ES6.

Så jag undrar om det finns ett sätt att konfigurera Visual Studio (2015 Update 1) så att det tar ES6 JavaScript som genereras av TypeScript och transpilerar det till ES5?

Så, jag skulle ha Typescript -> ES6 -> ES5. (Detta skulle vara på plats tills Typescript stöder Async/Await med inriktning på ES5.)

Svar #1

Kanske är det inte exakt det du frågade efter, men det är ett sätt att göra samma sak. Jag hoppas det kan vara användbart. För det första, som beskrivs här http://docs.asp.net/en/latest/client-side/using-gulp.html, kan du använda gulp i VS2015. Sedan, i din tsconfig.json-fil bör du ställa in TypeScript-kompilatorns alternativ till något liknande detta:

//tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "module": "commonjs",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true
    },
    "exclude": [
        ".vscode",
        "node_modules",
        "typings",
        "public"
    ]
}

Och slutligen, gulp-filen - från ett av mina projekt, till exempel - för att transpilera ES6 till ES5:

// gulpfile.js

'use strict';

var gulp = require("gulp"),
    ts = require("gulp-typescript"),
    babel = require("gulp-babel");

var tsSrc = [
    '**/*.ts',
    '!./node_modules/**',
    '!./typings/**',
    '!./vscode/**',
    '!./public/**'
];
gulp.task("ts-babel", function () {
    var tsProject = ts.createProject('tsconfig.json');
    return gulp.src(tsSrc)
        .pipe(tsProject())
        .pipe(babel({
            presets: ['es2015'],
            plugins: [
                'transform-runtime'
            ]
        }))
        .pipe(gulp.dest((function (f) { return f.base; })));
});

Och nu kan du transpila filer med kommandot gulp ts-babel. Och glöm inte att installera nödvändiga npm-paket som babel-preset-es2015 och babel-plugin-transform-runtime.

Uppd. Tack Ashok M A för uppmärksamheten. Ändrade pipe(ts()) till pipe(tsProject())

Relaterade artiklar