使用 Bable 配置 Typescript 项目以从 ES6 转换为 ES5

Question

我刚刚开始一个新项目，我真的很想使用最近为 typescript 发布的 Async 和 Await 内容。

但它仅适用于（现在）如果您的目标是 ES6。

所以我想知道是否有一种方法可以配置 Visual Studio (2015 Update 1) 以获取 Typescript 输出的 ES6 java 脚本并将其转换为 es5？

所以，我会有 Typescript -> ES6 -> ES5。（在 Typescript 支持面向 ES5 的 Async/Await 之前，这将一直存在。）

Answer 1

可能，这并不完全是您所要求的，但这是做同样事情的一种方法。我希望它有用。首先，正如这里所述http://docs.asp.net/en/latest/client-side/using-gulp.html，您可以在VS2015中使用gulp。然后，在 tsconfig.json 文件中，您应该将 typescript 编译器选项设置为如下所示：

//tsconfig.json

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

最后，来自我的一个项目的 gulp 文件，例如，用于将 ES6 转译为 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; })));
});

现在您可以使用命令gulp ts-babel来转译文件。并且不要忘记安装所需的 npm 包，例如 babel-preset-es2015 和 babel-plugin-transform-runtime。

更新。感谢 Ashok MA 的关注。将管道（ts（））更改为管道（tsProject（））