[英]Configure a Typescript project to transpile from ES6 to ES5 using Bable
I am just starting in on a new project and I really want to use the Async and Await stuff that was recently released for typescript. 我刚刚开始一个新项目,我真的想使用最近为typescript发布的Async和Await东西。
But it only works (right now) if you are targeting ES6. 但是,如果你的目标是ES6,它只会起作用(现在)。
So I am wondering if there is a way to configure Visual Studio (2015 Update 1) to take the ES6 java script that is output by Typescript and transpile it to es5? 所以我想知道是否有办法配置Visual Studio(2015 Update 1)来获取由Typescript输出的ES6 java脚本并将其转换为es5?
So, I would have Typescript -> ES6 -> ES5. 所以,我会有Typescript - > ES6 - > ES5。 (This would be in place until Typescript supports Async/Await targeting ES5.) (这将在Typescript支持Async / Await目标ES5之前实现。)
May be, it's not exactly what you asked, but it's a way to do the same thing. 可能是,这不完全是你问的问题,但它是一种做同样事情的方法。 I hope, it could be usefull. 我希望,它可能是有用的。 Firstly, as described here http://docs.asp.net/en/latest/client-side/using-gulp.html , you can use gulp in VS2015. 首先,如http://docs.asp.net/en/latest/client-side/using-gulp.html所述 ,您可以在VS2015中使用gulp。 Then, in your tsconfig.json file you should set typescript compiler options to something like this: 然后,在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"
]
}
And, finally, the gulp-file - from one of my projects, for example - for the transpiling ES6 to ES5: 最后,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; })));
});
And now you can transpile files with the command gulp ts-babel . 现在,您可以使用命令gulp ts-babel来转换文件。 And don't forget install required npm-packages like babel-preset-es2015 and babel-plugin-transform-runtime. 并且不要忘记安装所需的npm-packages,如babel-preset-es2015和babel-plugin-transform-runtime。
Upd . 更新 。 Thank's Ashok MA for attention. 感谢Ashok MA的关注。 Changed pipe(ts()) to pipe(tsProject()) 将管道(ts())更改为管道(tsProject())
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.