无法访问WebPack捆绑的功能 [英] Unable to access function bundled by WebPack
问题描述
我有一个非常简单的webapp，其中WebPack将javascript捆绑到一个由各种html页面使用的bundle.js文件中。
I have a very simple webapp where WebPack bundle the javascript into one bundle.js file that is used by various html page.
不幸的是，即使我指定了webpack配置文件，我想将它用作独立库（ libraryTarget 和库），可供以下文件使用脚本标签，它不起作用。所有内容似乎都封装在模块中，因此我的功能无法使用。
Unfortunately, even if I specify in the webpack config file that I want to use it as a standalone library (libraryTarget and library) that can be used by script tag, it doesn't work. Everything seems to be encapsulated in module so my functions are not available.
index.html
<!DOCTYPE html>
<html lang="EN">
<head>
<title>Play! Webpack</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app>
Loading...
</app>
<script type="text/javascript" src="/bundles/bundle.js" charset="utf-8"></script>
<button type="button" onclick="ui.helloWorld()">Click Me!</button>
</body>
</html>
我的webpack.base.config.js的输入和输出部分
entry: [
'./app/main.js'
],
output: {
path: buildPath,
filename: 'bundle.js',
sourceMapFilename: "bundle.map",
publicPath: '/bundles/',
libraryTarget: 'var',
library: 'ui'
},
main.js（入口点）
function helloWorld() {
alert( 'Hello, world!' );
}
点击我的按钮时，我在控制台中收到此错误：
When clicking on my button, I receive this error in the console:
Uncaught TypeError: ui.helloWorld is not a function
at HTMLButtonElement.onclick (localhost/:14)
对于其他信息，我的bundle.js文件的内容看起来像这样：
For additionnal info, the content of my bundle.js file looks something like that:
var ui = ...
(stuff here)
function(module, exports, __webpack_require__) {
__webpack_require__(79);
function helloWorld() {
alert('Hello, world!');
}
/***/ }
推荐答案
捆绑库导出的 ui 对象与入口点模块的导出对象相同。如果您没有从webpack中的模块显式导出函数，则只会在该模块的范围内定义（这是JavaScript模块的主要功能之一）。您需要将其分配给 module.exports 对象才能从模块外部访问它：
The ui object exported by the bundled library is the same as the exported object of the entrypoint module. If you do not explicitly export a function from a module in webpack, it will only be defined within that module's scope (which is one of the primary features of JavaScript modules). You need to assign it to the module.exports object to be able to access it from outside the module:
/** main.js **/
function helloWorld() {
alert( 'Hello, world!' );
}
// module.exports here (in the entrypoint module) is the same object
// as ui in the page's scope (outside webpack)
module.exports = {
helloWord: helloWorld,
};
然后你可以从其他脚本访问它：
Then you can access it from your other scripts:
<script>
ui.helloWorld(); // 'ui.helloWorld' is the same as
// 'module.exports.helloWorld' above
</script>
如果你没有明确设置 module.exports 在入口点模块中，它将默认为空对象 {} 。
If you don't explicitly set module.exports in the entrypoint module, it will default to an empty object { }.
这篇关于无法访问WebPack捆绑的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
