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

Question

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

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

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

所以，我会使用 Typescript -> ES6 -> ES5。（在 Typescript 支持 Async/Await 以 ES5 为目标之前，这将一直存在。）

Answer 1

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

//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 M A 的关注。将 pipe(ts()) 更改为 pipe(tsProject())

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

Configure a Typescript project to transpile from ES6 to ES5 using Bable

javascript

visual-studio

typescript

visual-studio-2015

babeljs