browserify两个独立的bundle从第二个文件传递变量

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 ./num3所需的num4 var num3 = require('./num3');变量1}}可以获得价值。

是否有正确的方法让num3和num4通过变量？

Answer 1

首先，我认为require中的main.js存在问题。

如果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模拟）感兴趣，那么它就是here。 --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');