Question

我想使用babel从typescript转换ES6输出并使用以下语法：

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));
}

这会生成看似正确的代码，但导入的错误，这个ts文件导入：

 import * as express from 'express'

...变成：

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

...在node.js中运行时失败。（“表达不是函数”）当我直接在typescript编译器中编译为es5时，我得到了这个工作输出：

var express = require('express');

我在这里做错了什么？

注意：我想输出ES6，因为在这种情况下，某些“打字”库 express-handlebars 会假设为ES6。我可以使用ES5 ts-output来使用它，但是必须手动编辑typing文件以包含es6-promise符号 - 这在我的构建管道中不能很好地工作。还有其他方法可以解决这个问题吗？

注意：我使用与常规ES6 javascript文件相同的babel设置，并且运行良好。

Answer 1

这是因为TypeScript期望从express中导出默认值，但没有一个。

他们added在{1.8} allowSyntheticDefaultImports标志来解决此问题。根据{{3}}：

允许从没有默认导出的模块进行默认导入。这样做不影响代码发出，只是类型检查。

尝试将其作为您的选项之一传递：

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

Answer 2

事实证明，切换到ES6目标时，打字稿编译器会更改模块标志的默认选项。这似乎是原因。将模块选项修复为＆＃39; CommonJS＆＃39;时，代码可以正常使用ES6目标和Babel转换：

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

现在我可以使用依赖ES6的打字文件来表达＆＃39; express-handlebars＆＃39;没有破坏d.ts文件。

使用babel在gulp中转换打字稿ES6

2 个答案: