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');