使用Babel将TypeScript项目从ES6转换为ES5的配置

Question

我刚开始一项新项目，我非常想使用最近发布的类型脚本中的异步和等待功能。但是，它仅在您的目标为ES6时起作用（现在）。 那么我的问题是，是否有一种方式可以配置Visual Studio（2015 Update 1），使其将TypeScript输出的ES6 JavaScript转换为ES5？ 因此，我将拥有TypeScript -> ES6 -> ES5。（在TypeScript支持以ES5为目标的异步/等待之前，这将一直存在。）

- Vaccano

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

- django dev

---

在ts-babel任务中，您正在创建tsProject，但它没有被使用！有任何原因吗？ - Ashok M A