在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
这几乎可以正常工作,唯一的问题是它不会导入jquery
或d3
等外部库。也就是说,如果我的代码显示import * as d3 from "d3"
,则不会导入任何内容。另一方面,Browserify会识别这些库,并且可以轻松导入它们。
我错过了什么?没有错误产生,所以我不知道发生了什么。
答案 0 :(得分:1)
另一方面,Browserify可以识别这些库,并且可以轻松导入它们。 我错过了什么?
请使用browserify(或webpack)作为外部库。
基本上,您有一个文件d3.d.ts
,它是实际导入上下文而不是node_modules/d3/*
。因此TypeScript不会为编译输出加载node_modules/d3
。
--allowJS
是为了方便您的JavaScript 迁移。你刚刚发现了许多陷阱中的一个。
PS:如果node_module本身也在TypeScript中,那么TypeScript很可能正常工作。