私は Browserify を 1 つの変換方法で使用しています: reactify。スクリプトを作成する方法は次のとおりです。
gulp.task('scripts', function() {
var b = null, watcher = null;
function bundle() {
return b
.on('error', function(err) { console.error(err) })
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dest/scripts'));
}
b = browserify({
debug: true,
entries: ['app/index.jsx'],
transform: [ reactify ],
extensions: [ '.jsx' ],
cache: {}, packageCache: {}, fullPaths: true
});
if (config.watch) {
b = watchify(b);
b.on('update', bundle);
}
return bundle();
});
アプリをローカルで実行すると、ソース マップは正しく、開発ツールで元の jsx ファイルを確認できます。
この問題は、別の変換を追加したときに始まります。次に、開発ツールを実行して検索すると、元のファイルが取得されません。代わりに、コンパイル後にjsxファイルを取得します。es6ify、uglifyfy、envify (reactify + es6ify、reactify + uglifyfy、reactify + envify) で試してみたところ、同じ間違った動作が発生しました。
ソース マップの構成に問題があるか、browserify のバグである必要があります。
それを修正する方法はありますか?