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

如果我将 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 将在运行时用 between-bundle require 解析。

您应该在 require 中使用 non-relative 名称（如果是普通的 JavaScript 文件，也不要使用 .js）：

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

那么main.js中的require应该是：

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 模拟）感兴趣，请参阅 here。 --require 和 --exclude Browserify 选项基本上颠覆了该机制并指示 Browserify 在运行时在 bundle 之间解析。

此外，如果需要，您可以为 require-ing 在包之间指定多个模块：

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

browserify two separate bundles pass variable from second file