Webpack：多个js文件的单一范围？

Question

想象两个 javascript 文件和一个入口点文件：

app.js：

require(a.js);
require(b.js);

a.js:

var a = 4;

b.js：

var b = a+1;
console.debug(b);

不幸的是，这不起作用，因为文件 a 的上下文在文件 b 中丢失了，这意味着 b.js 不知道任何名为 a 的变量。

如何使用 Webpack 解决这个问题 - 我只想得到与

相同的结果

<script src="a.js"></script>
<script src="b.js"></script>

具有通过 Webpack 捆绑的附加效果。

Answer 1

使用 ES2015 模块（可能不适合你，你可以改用require）

a.js：

export var a = 4;

b.js

import { a } from "./b.js";
var b = a+1;
console.debug(b);

Webpack 是一个模块构建/捆绑系统，它通过从 javascript 文件创建 UMD（通用模块）来工作。您必须导入/导出这些模块才能使它们在范围内。