browserify 兩個單獨的包從第二個文件傳遞變量

Question

main.js
level.js
 num3.js
 num4.js

main.js 如下所示

require('./level');
console.log(num3);  

level.js 如下所示

var num3 = require('./num3');
var num4 = require('./num4');

捆綁文件

browserify --require ./level.js:level.js > bundle-level.js
browserify --exclude level.js main.js > bundle-main.js

我無法獲得num3 //Uncaught ReferenceError: num3 is not defined variable which required from ./num3 num4 ，如果我改變var num3 = require('./num3'); 到全局變量window.num3 = require('./num3'); 獲取值很好。

是否有正確的方法讓變量 num3 和 num4 通過？

Answer 1

首先，我認為main.js的require存在問題。

如果main.js有這個require ：

require('./level');

Browserify 將在主包中包含level.js 。 原因是該名稱后面的:在下面的命令：

browserify --require ./level.js:level.js > bundle-level.js

是用於模塊的名稱。 在這個命令中：

browserify --exclude level.js main.js > bundle-main.js

你告訴 Browserify 當它看到require('level.js')它不應該捆綁任何東西，因為require將在運行時用一個包間require來解決。

你應該在require使用非相對名稱（並且，如果它是一個普通的 JavaScript 文件，也不要使用.js ）：

browserify --require ./level.js:level > bundle-level.js
browserify --exclude level main.js > bundle-main.js

然后require在main.js應該是：

const level = require('level');

如果你想導出num3和num4 ，你可以在level.js這樣做：

exports.num3 = require('./num3');
exports.num4 = require('./num4');

在main.js您將擁有：

const level = require('level');
console.log(level.num3);
console.log(level.num4);

如果您對 Node 的模塊解析機制（Browserify 模擬的）感興趣，請參閱此處。 --require和--exclude Browserify 選項基本上顛覆了該機制，並指示 Browserify 在運行時在包之間進行解析。

此外，如果需要，您可以為包之間的require指定多個模塊：

browserify \
  --require ./num3.js:num3 \
  --require ./num4.js:num4 \
  --require ./level.js:level > bundle-level.js

browserify \
  --exclude num3 \
  --exclude num4 \
  --exclude level main.js > bundle-main.js

在main.js ：

const level = require('level');
const num3 = require('num3');
const num4 = require('num4');