Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

But it only works (right now) if you are targeting 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?

So, I would have Typescript -> ES6 -> ES5. (This would be in place until Typescript supports Async/Await targeting ES5.)

like image 550
Vaccano Avatar asked Nov 09 '22 00:11

Vaccano


1 Answers

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. Then, in your tsconfig.json file you should set typescript compiler options to something like this:

//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:

// 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. And don't forget install required npm-packages like babel-preset-es2015 and babel-plugin-transform-runtime.

Upd. Thank's Ashok M A for attention. Changed pipe(ts()) to pipe(tsProject())

like image 128
django dev Avatar answered Nov 14 '22 21:11

django dev