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

Question

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

但它仅在您以 ES6 为目标时才有效(现在)。

所以我想知道是否有一种方法可以配置 Visual Studio(2015 更新 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 文件——例如来 self 的一个项目——用于将 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 M A 的关注。将 pipe(ts()) 更改为 pipe(tsProject())