使用browserify后保留原始打字稿源地图

Question

背景:我正在将2个依赖的TypeScript文件编译为js,它使用tsc 1.0生成源映射(每个文件一个源映射)

我正在使用-m commonjs然后使用browserify生成单个bundle.js

但是我注意到我在bundle中得到了两次原始的源映射引用,这似乎不起作用.

传球--debug似乎也没有成功.

我有一个感觉这个问题:https://github.com/substack/node-browserify/issues/325有点相关,但我无法弄清楚问题是如何解决的.

另外建议使用https://github.com/substack/browser-pack,但我还是不完全了解如何使用它,它是否取代了browserify？

最重要的是,我想合并2个js文件,但是使用browserify将js"合并"到ts源地图.那可能吗？

Answer 1

tsify是一个更好的browserify插件,取代了例如typescriptifier.

npm install tsify browserify watchify

你像这样使用tsify:

browserify src/index.ts -p tsify --debug -o build/index.js

请注意,这支持browserify --debug开关,不需要额外的技巧.所以你也可以像watchce一样使用它:

watchify src/index.ts -p tsify --debug -o build/index.js

Answer 2

使用minifyify browserify插件我相信你可以使用TypeScript和Browserify并保留源地图.编译TypeScript文件后,您应该能够通过browserify使用minifyify插件传递"entry"文件(通过commonjs语法导入另一个文件).

var browserify = require('browserify'),
    bundler = new browserify();

bundler.add('entry.js');
bundler.plugin('minifyify', {map: 'bundle.js.map'});
bundler.bundle({debug: true}, function (err, src, map) {
  if (err) console.log(err);
  fs.writeFileSync('bundle.js', src);
  fs.writeFileSync('bundle.js.map', map);
});