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.
