web-dev-qa-db-ja.com

BrowserifyとGulpを使用して、共有共通ライブラリを使用して個別のJavaScriptバンドルを作成します

仕事中の私のチームのために、GulpとBrowserifyの助けを借りて、半自動化JavaScriptスクリプトと依存関係管理システムをセットアップしようとしています。

私が達成しようとしていることが、現在利用可能なツールのセット（および私の限られたJavaScriptの知識）で可能かどうかさえわかりません。私が達成しようとしているのはかなり一般的なシナリオだと思いますが、探していた情報を見つけることができませんでした。

次の図を検討してください。

enter image description here

線は依存関係を示します。 Module-vやModule-yなどの共有モジュールの場合、次のようにしてスクリプトを複製したくありません。それぞれのバンドルに含まれています。

Browserifyを使用すると、モジュールを手動で無視または除外できることを知っています。これは、プロジェクトが若い場合は問題ありませんが、プロジェクトが大きくなるにつれて、どの依存関係を含める必要があるかを管理するのは非常に面倒になります。

A ここで同様のQ＆A 私が尋ねようとしていることと同じ本質を持っていると思いますが、私には、それは完全には明確ではありません。また、 その後ブラックリストに登録されたgulp-browserify も参照します。

私の図では、3つのBrowserifyエントリポイントがあることがわかりますが、Gulp/Node/Browserifyの経験が不足しているため、どうすれば頭を包み込むのに苦労しています。私がやりたいことを達成しようとします。

私はすでに試みているので、それをつなぎ合わせるための作業を喜んで行います-しかし、プロジェクトマネージャーは私の首を呼吸しているので、少し何かを実装できるまで一時的な「解決策」を一緒にハックする必要がありますより自動化され、堅牢になります。

前もって感謝します。

編集

Browserifyのプラグインドキュメント から、これは factor-bundle which substack私に指摘）を使用することで達成できる可能性があるようです。 ;ただし、Node/Browserify/Gulpの経験が不足しているため、すべての要素をまとめるのに苦労しています。

関連する質問

javascriptgulpbrowserify
26
justrhysism

それを理解し、学んだことを共有する：

コード例：

var gulp = require('gulp'),
    source = require('vinyl-source-stream'),
    browserify = require('browserify'),
    factor = require('factor-bundle');

gulp.task('browserify', function(){

    return browserify({
        entries: ['blog.js', 'page.js']
    })
    .plugin(factor, {
        // File output order must match entry order
        o: ['bundle/blog.js', 'bundle/page.js']
    })
    .bundle({
        debug: true
    })
    .pipe(source('common.js'))
    .pipe(gulp.dest('bundle/'));

});

この出力と図の主な違いは、common.jsファイルがblog.jsとpage.jsの間の一般的な依存関係に基づいて自動的に生成されることです。これは factor-bundleのドキュメント で説明されています。

注：

  • Nodeは、出力ファイルがまだ存在しない場合にエラーをスローすることがわかりました。factor-bundleが単に出力ファイルにストリームを書き込むと想定していたので、理由はわかりません。回避策として、出力ディレクトリを「クリーンアップ」した後、それを幸せに保つために「プレースホルダー」ファイルを作成しただけです。

  • それをbrowserifyプラグインとして使用するときに factor-bundle stream event にアクセスする方法がわからないので（それは不可能かもしれません）、出力ファイルでさらに作業する（醜いなど）など）パイプラインのどこかで、おそらく別のbrowserifyプラグインを使用して、または事後に実行する必要があります。

44
justrhysism