導入外部庫並使用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將很可能正常工作。