Javascript 如何使用 webpack 访问全局对象（窗口）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29844893/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I access the global object (window) using webpack?
提问by user2072912
I'm trying to interface ActionScript with JavaScript using ExternalInterfaceand webpack.
我正在尝试使用ExternalInterface和 webpack将 ActionScript 与 JavaScript 进行交互。
ExternalInterfacecan only provoked (call) functions found on the global object (window). How can I get a webpack module reference on window(global object)?
ExternalInterface只能call在全局对象 ( window)上找到激发 ( ) 函数。如何在window（全局对象）上获取 webpack 模块引用？
Allow me to elaborate some, I want to have a namespace for the company (window.companyName) with an interface for ExternalInterface:
请允许我详细说明一些，我想为公司 ( window.companyName) 提供一个命名空间，并具有以下接口ExternalInterface：
window.companyName = { isReady: function() { ... },
driver1: function() { ... },
driver2: function() { ... } }
The ActionScript will drive my JavaScript. The more fundamental question is, how do I set globals using webpack so that ExternalInterfacecan see them (preferably as exports of a module)?
ActionScript 将驱动我的 JavaScript。更基本的问题是，如何使用 webpack 设置全局变量以便ExternalInterface可以看到它们（最好是作为模块的导出）？
I've tried using expose-loader, exports-loaderimports-loaderwith no luck. expose-loaderis ideally what I need, but doesn't seem to work. When I set window.companyName in my modules and try to verify it in my chrome console, it results in undefined.
我试过使用expose-loader，但exports-loaderimports-loader没有运气。expose-loader理想情况下是我需要的，但似乎不起作用。当我在我的模块中设置 window.companyName 并尝试在我的 chrome 控制台中验证它时，它会导致undefined.
回答by machaj
Aren't you using webpack-dev-server?
你不是在用webpack-dev-server吗？
Because when I try webpackcommand everything is working fine. I'm testing it by typing window.mySampleGlobalVariablein chrome developer tools.
因为当我尝试webpack命令时一切正常。我正在通过输入window.mySampleGlobalVariablechrome 开发人员工具来测试它。
BUTwhen I run webpack-dev-servercommand then my window variable is undefined.
但是当我运行webpack-dev-server命令时，我的窗口变量未定义。
I have this sample app:
我有这个示例应用程序：
app.js
应用程序.js
window.mySampleGlobalVariable = 'TEST';
console.log('App is ready');
index.html
索引.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Webpack test</title>
</head>
<body>
Webpack test
<script src="bundle.js"></script>
</body>
</html>
webpack.config.js
webpack.config.js
var path = require('path');
module.exports = {
entry: './app.js',
output: {
filename: './bundle.js'
},
resolve: {
extensions: ['', '.js']
}
};
回答by Fabian Zeindl
If you running webpack-dev-serverwith the iframe you cannot access the variable via the Chrome console.
如果您webpack-dev-server使用 iframe运行，则无法通过 Chrome 控制台访问该变量。
回答by Ricardo Stuven
You dohave access to window object from your webpackedscript. Webpack does not interfere with it since the wrapper function only injects module, exportsand __webpack_require__arguments.
您确实可以从webpacked脚本访问 window 对象。Webpack 不会干扰它，因为包装函数只注入module,exports和__webpack_require__参数。
Try it writing a script with a single line accessing window object and then check out the output script.
尝试用一行访问 window 对象编写脚本，然后查看输出脚本。
Your assignment should work, unless the execution never reaches it or some loader is altering the relevant code.
您的分配应该有效，除非执行从未到达它或某些加载程序正在更改相关代码。
