如何使用Browserify避免代碼重復

Question

CommonJS noob在這里，我讀到了瀏覽器並認為它比我現有的RequireJS設置更簡單，所以我繼續改變它們。 我發現的是我將在每個包中進行代碼重復。 讓我解釋：

可以說，我有page1.js和page2.js使用jquery.js和jquery-ui.js

現在我必須創建bundle1.js和bundle2.js並且jquery.js和jquery-ui.js的內容在每個包中都是重復的。

我已經嘗試通過捆綁jquery.js和jquery-ui.js在瀏覽器中分離成不同的文件，例如：

<script src="lib_bundle.js">
<script src="page1.js">

問題是， require內page1.js ，因為它不是一個CommonJS的捆綁將會失敗。

Answer 1

這種情況是外部要求的。 我不熟悉browserify的命令行，但在使用JavaScript API時，您可以執行以下操作。 這會將常見的依賴關系捆綁在一起。 然后，它們可以被其他捆綁引用為“外部”。

var browserify = require('browserify');

var externalDependencies = [
  'jquery',
  'jquery-ui'
];

// shared libraries bundle (i.e. jquery, jquery-ui)
var libsBundle = browserify({
  // your options
  // ...
  require: externalDependencies
});

// main bundle (i.e. page1, page2)
var mainBundle = browserify({
  // your options
  // ...
});
mainBundle.external(externalDependencies);

libsBundle.bundle();
mainBundle.bundle();

腳本標簽：

<script src="libsBundle.js">
<script src="mainBundle.js">

Answer 2

您還可以使用此命令行為jquery和jquery-ui創建單獨的包：

browserify -r jquery -r jquery-ui > modules.js

將<script src="modules.js"></script>添加到html並將-x jquery -x jquery-ui到您的兩個包中。

browserify -x jquery -x jquery-ui page1.js > bundle1.js
browserify -x jquery -x jquery-ui page2.js > bundle2.js