如何使用 webpack 访问全局对象（窗口）？
Posted
技术标签:
【中文标题】如何使用 webpack 访问全局对象（窗口）？【英文标题】：How do I access the global object (window) using webpack? 【发布时间】：2015-07-02 21:42:42 【问题描述】：我正在尝试使用 ExternalInterface 和 webpack 将 ActionScript 与 javascript 交互。
ExternalInterface 只能激发在全局对象 (window) 上找到的 (call) 函数。如何在 window（全局对象）上获取 webpack 模块引用？
请允许我详细说明一下，我想为公司 (window.companyName) 提供一个命名空间，并为 ExternalInterface 提供一个接口：
window.companyName = isReady: function() ... ,
driver1: function() ... ,
driver2: function() ...
ActionScript 将驱动我的 JavaScript。更基本的问题是，我如何使用 webpack 设置全局变量，以便 ExternalInterface 可以看到它们（最好作为模块的导出）？
我尝试过使用expose-loader、exports-loader imports-loader，但没有成功。 expose-loader 是我最需要的，但似乎不起作用。当我在我的模块中设置 window.companyName 并尝试在我的 chrome 控制台中验证它时，它会导致 undefined。
【问题讨论】：
你能分享你的加载器配置吗？ 【参考方案1】：你不是用webpack-dev-server吗？
因为当我尝试webpack 命令时，一切正常。我正在通过在 chrome 开发者工具中输入 window.mySampleGlobalVariable 来测试它。
但是当我运行webpack-dev-server 命令时，我的窗口变量是未定义的。
我有这个示例应用程序：
app.js
window.mySampleGlobalVariable = 'TEST';
console.log('App is ready');
index.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
var path = require('path');
module.exports =
entry: './app.js',
output:
filename: './bundle.js'
,
resolve:
extensions: ['', '.js']
;
【讨论】：
【参考方案2】：如果您使用 iframe 运行 webpack-dev-server，则无法通过 Chrome 控制台访问该变量。
【讨论】：
当然可以。您只需通过更改默认为<top frame> 的下拉菜单来更改开发工具控制台的上下文。参考：***.com/a/8581276/188740
我想买一个facepalm，Pat.【参考方案3】：
您确实可以从您的 webpacked 脚本访问窗口对象。 Webpack 不会干扰它，因为 wrapper 函数只注入 module、exports 和 __webpack_require__ 参数。
尝试编写一个单行访问窗口对象的脚本，然后检查输出脚本。
您的分配应该可以工作，除非执行永远不会到达它或某些加载器正在更改相关代码。
【讨论】：
许多文件假定this 对象指向 window 。我怎样才能做到这一点？
(function() console.log(this == window);).bind(window)();
webpack 确实会干扰。我正在使用 AMD 模块。这些模块使用 this 作为全局对象在 webpack 外部工作，但一旦通过 webpack 运行就会失败。以上是关于如何使用 webpack 访问全局对象（窗口）？的主要内容，如果未能解决你的问题，请参考以下文章
使用角度，打字稿，webpack时如何将jquery添加到窗口对象