配置一个 Typescript 项目以使用 Bable 从 ES6 转换为 ES5答案

【问题标题】：Configure a Typescript project to transpile from ES6 to ES5 using Bable配置一个 Typescript 项目以使用 Bable 从 ES6 转换为 ES5
【发布时间】：2017-04-01 13:23:47
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript visual-studio typescript visual-studio-2015 babeljs

【解决方案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 M A 的关注。将 pipe(ts()) 改为 pipe(tsProject())

【讨论】：

在ts-babel任务中，你正在创建tsProject，它没有被使用！有什么原因吗？