javascript - 为什么我们可以在浏览器中使用全局变量？

Question

众所周知，全局变量在浏览器中是window，在nodejs中是global。

我阅读了一些 NPM 包的源代码，它们使用 global 像 global.Set 而不是 window.Set 。当我导入该包时，它在我基于浏览器的项目中运行良好。这让我很困惑。

我认为原因是babel。也许使用global可以通过babel编写跨平台包？但它是如何工作的。

package use global

Answer 1

我不是 babel 或 webpack 方面的专家，远非如此，但是查看 webpack 的输出代码，您可以看到 webpack 正在将 global 变体注入(inject)到您的代码中，如果您使用它，所以如果我们有一个简单的代码，例如:

console.log("just a test");

这就是我们源代码中的最终内容:

eval("__webpack_require__.r(__webpack_exports__);\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] =

但是，如果我们使用下一个代码:

console.log("just a test", global);

这是我们的输出:

eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function(global) {//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n/* harmony default export */ __webpack_exports__[\"default\"] =

您可以清楚地看到变化。

找到这个issue您可能会发现这对解决这个问题很有帮助。

据我了解，babel正在使用this在内部，因此如果您在代码中使用它，它会导出它。

请注意，您无法在控制台中访问global变体。

注意 global 和 window 是同一个对象，它不是副本，因此对 global 所做的所有更改都将在 window 上完成