导入外部库并使用typescript生成单个文件

时间:2016-04-22 00:52:28

标签: typescript typescript1.8

在Gulp中,我使用Typescript将文件转换为ES6,然后使用Babel生成ES5,最后使用Browserify生成包含所有模块的1个文件。这是我的代码:

gulp.task('scripts', function() {
    return browserify('./src/scripts/main.ts')
        .plugin(tsify, {moduleResolution: "node", target:"es5", allowJs:true, allowUnreachableCode:true"})
        .transform("babelify", {presets:["es2015"], extensions:[".ts", ".js"]})
        .bundle()
        //Pass desired output filename to vinyl-source-stream
        .pipe(source('main.js'))
        // Start piping stream to tasks!
        .pipe(gulp.dest('./dist/scripts/'));
});

如果我只需要依赖于Typescript来完成上述所有操作,我认为它会很好并且不易出错。随着转录程序我尝试了这个

tsc --moduleResolution "node" --module "amd"  --allowJs --outDir "out/" --allowUnreachableCode --out foo.js main.ts

这几乎可以正常工作,唯一的问题是它不会导入jqueryd3等外部库。也就是说,如果我的代码显示import * as d3 from "d3",则不会导入任何内容。另一方面,Browserify会识别这些库,并且可以轻松导入它们。

我错过了什么?没有错误产生,所以我不知道发生了什么。

1 个答案:

答案 0 :(得分:1)

  另一方面,Browserify可以识别这些库,并且可以轻松导入它们。   我错过了什么?

请使用browserify(或webpack)作为外部库。

基本上,您有一个文件d3.d.ts,它是实际导入上下文而不是node_modules/d3/*。因此TypeScript不会为编译输出加载node_modules/d3

更多

--allowJS是为了方便您的JavaScript 迁移。你刚刚发现了许多陷阱中的一个。

PS:如果node_module本身也在TypeScript中,那么TypeScript很可能正常工作。