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

Question

在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/')); 
}); 

我认为这将是很好且不易出错，如果我只有依靠打字稿上述所有的。随着transpiler我想这

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

这几乎工作得很好，唯一的问题是，它并不能引入外部库，例如jquery或d3。也就是说，如果我的代码表示import * as d3 from "d3"，则不会导入任何内容。另一方面，Browserify可以识别这些库，并且不会导入它们。

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

Answer 1

另一方面，Browserify可以识别这些库，并且无需导入它们。 我错过了什么？

请使用browserify（或webpack）作为外部库。

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

更多

--allowJS是为了方便在这一点上您的JavaScript迁移。你刚刚发现了很多陷阱之一。

PS：如果node_module本身也在TypeScript中，TypeScript将很可能正常工作。