使用Browserify和Gulp使用共享公共庫創建單獨的JavaScript包

Question

對於我的團隊在工作中，我試圖建立一個半自動的JavaScript腳本和依賴管理系統，杯和Browserify的幫助。

我甚至不確定使用當前可用的工具集（以及我有限的JavaScript知識）是否可以實現我想要實現的目標。 我相信我想要實現的是一個非常常見的場景，但我無法找到我一直在尋找的信息。

請考慮以下圖表：

這些線表示依賴性。 對於共享模塊，例如Module-v和Module-y ，我不希望腳本通過包含在它們各自的捆綁包中而被復制。

我知道使用Browserify我可以手動忽略或排除模塊，這在項目年輕時很好 - 但隨着項目的增長管理需要包含哪些依賴項將變得非常繁瑣。

我認為這里的類似問答與我想要提出的問題具有相同的本質，但對我而言，它並不十分清楚。 它還引用了gulp-browserify，后來被列入黑名單 。

在我的圖表中，我可以看到我有三個Browserify 入口點 ，但是我缺乏Gulp / Node / Browserify經驗意味着我正在努力探索如何實現我想要的目標。

我很樂意嘗試將它拼湊起來，正如我已經嘗試過的那樣 - 但項目經理正在我的脖子上呼吸，所以我不得不將一個臨時的“解決方案”合並在一起，直到我能夠實現一些東西更加自動化和強大。

提前致謝。

編輯

它從似乎Browserify的插件文檔 ，這可能是能夠通過實現因素束其亞組 向我指出的 ; 然而，由於我缺乏Node / Browserify / Gulp經驗，我正努力將所有部分組合在一起。

相關問題

• 如何以編程方式使用factorify與browserify？

Answer 1

想出來，分享學習：

代碼示例：

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會拋出錯誤。 我不確定為什么我會假設因子束只是簡單地將一個流寫入輸出文件，無論它是否存在。 作為一種解決方法，在“清理”輸出目錄之后，我只是創建了“占位符”文件以保持它的快樂。

• 我沒有想到如何在將它作為browserify插件使用時訪問因子束流事件 （甚至可能不可能），因此對輸出文件（例如uglifying等）的任何進一步工作都可能需要在管道中的其他地方完成，可能使用另一個browserify插件，甚至在事實之后。