4

Browserify を使用して、すべての Javascript アセットをバンドルしています。ただし、Browserify は、アプリが複雑になるにつれてビルドが非常に遅くなるため、Watchify に切り替えました。これで問題は解決しました。

しかし、これにより新たな問題が発生しました。この間、デバッグ用にソース マップを出力し、出力も Minifyify で縮小しています。Watchify を最初に実行すると、これは正常に機能し、ソース マップは元のファイルに正しくマップされます。ただし、ファイルを変更すると、ソース マップは元のファイルの縮小されていないバージョンではなく、縮小されたバージョンを指すことになります。

これは、Watchify が入力ソース マップを取り込んでから変更していないためだと推測していますが、確かではありません。

これが私のコードです：

var watchScripts = function() {
    var rebundle = function() {
        return bundler.bundle()
            .pipe(source('app.min.js'))
            .pipe(gulp.dest('build/scripts/'));
    };
    var bundler = watchify({
            entries: ['./app/scripts/app.js', './app/jsx/app.jsx'],
            extensions: ['.js', '.jsx']
        })
        .plugin('minifyify', {
            map: 'app.js.map',
            output: 'build/scripts/app.js.map'
        })
        .transform(reactify)
        .transform(debowerify)
        .on('update', rebundle);

    return rebundle();
};

ここで何がうまくいかないのですか？Watchify が 2 回目のランスルーで既存のソース マップを考慮していないということですか、それとも別のことですか? いずれにせよ、Watchify を介した 2 回目以降の実行で、ソース マップが縮小されていないバンドルされていないアセットに正しくリンクするようにするにはどうすればよいでしょうか?

4

1 に答える 1

2

GitHub の問題 Ash filedをフォローしていない場合、watchify は現在 minifyify をサポートしていません。

minifyify の作者 Ben-ng は次のように述べています (2014 年 10 月 1 日):

私は watchify で minifyify をテストしておらず、サポートするつもりもありません。minifyify は本番環境での使用を想定しており、watchify は開発環境での使用を想定しています。

この制限を文書化したメモが README に追加されました。

解決策は、開発でのみwatchifyを使用し、展開/統合のためにminifyifyを使用して本番バンドルを作成することです。これにより、ミニフィケーション自体によって導入されたバグが隠される可能性がありますが、うまくいけば、これらは十分にまれであるため、CI/ステージングでそれらをキャッチしても問題ありません。

于 2014-10-27T19:45:11.997 に答える