Använder Babel för att transformera TypeScript ES6 i Gulp


Jag ville använda babel för att omvandla ES6-utdata från TypeScript och använde denna syntax:

var gulpBabel = require('gulp-babel');
var ts = require('gulp-typescript');
// ...
function compileTypescript(fileSpec, folder) {
    var options = {jsx: 'react', moduleResolution: 'node', target: 'ES6'}
    return gulp
        .src(fileSpec)
        .pipe(sourcemaps.init())
        .pipe(ts(options))
        .pipe(gulpBabel({presets: ['react', 'es2015', 'stage-0']}))
        .pipe(sourcemaps.write("."))
        .pipe(gulp.dest(folder));
}

Detta genererar till synes korrekt kod, men något dåligt händer med importerna, denna ts-fil import:

 import * as express from 'express'

... blir:

 var _express = require('express');
 var express = _interopRequireWildcard(_express);

... vilket misslyckas när det körs i node.js. ("express är inte en funktion") När jag kompilerar till es5 direkt i TypeScript-kompilatorn får jag denna fungerande output:

var express = require('express');

Vad gör jag för fel här?

Obs: Jag vill generera ES6 eftersom vissa "typnings"-bibliotek, express-handlebars i detta fall, antar ES6. Jag kan få detta att fungera med ES5 ts-utdata, men då måste typningsfilen redigeras manuellt för att inkludera es6-promise-symboler - vilket inte fungerar bra i min byggprocess. Finns det några andra sätt att lösa detta problem?

Observera: Jag använder samma Babel-inställning med mina vanliga ES6 JavaScript-filer och det fungerar bra.

Svar #1

Detta beror på att TypeScript förväntar sig en standardexport från express, men det finns ingen.

De lade till en allowSyntheticDefaultImports-flagga i 1.8 för att åtgärda detta. Enligt dokumentationen:

Tillåt standardimporter från moduler utan standardexport. Detta påverkar inte kodgenerering, bara typkontroll.

Försök att skicka det som ett av dina alternativ:

var options = {jsx: 'react', moduleResolution: 'node', target: 'ES6', allowSyntheticDefaultOptions: true}

Svar #2

Det visar sig att TypeScript-kompilatorn ändrar standardalternativet för module-flaggan när man byter till ES6-mål. Detta verkar vara orsaken. När man fixar module-alternativet till 'CommonJS' fungerar koden bra med ES6-mål och Babel-transformationer:

var options = {jsx: 'react', moduleResolution: 'node', target: 'ES6', 
    module: 'CommonJS'}
    ------------------

Nu kan jag använda den ES6-beroende typingsfilen för 'express-handlebars' utan att förstöra d.ts-filen.