Búsqueda de sitios web

javascript - Configurar un proyecto de Typescript para transpilar de ES6 a ES5 usando Babel


Estoy empezando un nuevo proyecto y realmente quiero usar las cosas de Async y Await que se lanzaron recientemente para TypeScript.

Pero solo funciona (en este momento) si estás apuntando a ES6.

Entonces me pregunto si hay una manera de configurar Visual Studio (2015 Update 1) para tomar el JavaScript ES6 que es generado por TypeScript y transpilarlo a ES5?

Entonces, tendría Typescript -> ES6 -> ES5. (Esto estaría en vigor hasta que Typescript soporte Async/Await apuntando a ES5.)

Respuesta #1

Puede ser que no sea exactamente lo que pediste, pero es una manera de hacer lo mismo. Espero que pueda ser útil. Primero, como se describe aquí http://docs.asp.net/en/latest/client-side/using-gulp.html, puedes usar gulp en VS2015. Luego, en tu archivo tsconfig.json deberías configurar las opciones del compilador de TypeScript a algo como esto:

//tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "module": "commonjs",
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true
    },
    "exclude": [
        ".vscode",
        "node_modules",
        "typings",
        "public"
    ]
}

Y, finalmente, el archivo gulp - de uno de mis proyectos, por ejemplo - para la transpilación de ES6 a 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; })));
});

Y ahora puedes transpilar archivos con el comando gulp ts-babel. Y no olvides instalar los paquetes npm necesarios como babel-preset-es2015 y babel-plugin-transform-runtime.

Actualización. Gracias Ashok M A por la atención. Cambié pipe(ts()) a pipe(tsProject())

Artículos relacionados