Javascript 无法访问Web包绑定的功能_Javascript_Module_Webpack

Javascript 无法访问Web包绑定的功能

javascript module webpack

Javascript 无法访问Web包绑定的功能,javascript,module,webpack,Javascript,Module,Webpack,我有一个非常简单的webapp，其中WebPack将javascript捆绑到一个bundle.js文件中，供各种html页面使用不幸的是，即使我在webpack配置文件中指定要将其用作脚本标记可以使用的独立库（libraryTarget和library），它也不起作用。所有东西似乎都封装在模块中，所以我的函数不可用 index.html <!DOCTYPE html> <html lang="EN"> <head> <title>Pla

我有一个非常简单的webapp，其中WebPack将javascript捆绑到一个bundle.js文件中，供各种html页面使用

不幸的是，即使我在webpack配置文件中指定要将其用作脚本标记可以使用的独立库（

libraryTarget

和

library

），它也不起作用。所有东西似乎都封装在模块中，所以我的函数不可用

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>

main.js（入口点）

单击我的按钮时，我在控制台中收到此错误：

Uncaught TypeError: ui.helloWorld is not a function
    at HTMLButtonElement.onclick (localhost/:14)

对于其他信息，my bundle.js文件的内容如下所示：

var ui = ...

(stuff here)

function(module, exports, __webpack_require__) {

    __webpack_require__(79);

    function helloWorld() {
        alert('Hello, world!');
    }

/***/ }

捆绑库导出的

ui

对象与entrypoint模块的导出对象相同。如果您没有从webpack中的模块显式导出函数，它将仅在该模块的作用域内定义（这是JavaScript模块的主要功能之一）。您需要将其分配给

模块。导出对象以便能够从模块外部访问它：
/** 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,
};

然后，您可以从其他脚本访问它：
<script>
  ui.helloWorld(); // 'ui.helloWorld' is the same as
                   // 'module.exports.helloWorld' above
</script>


ui.helloWorld（）；/'“helloWorld”与
//上面的“module.exports.helloWorld”

如果您没有在入口点模块中显式设置module.exports
，它将默认为空对象{}
，即使这样可以解决问题，但在处理大型函数库（可能由其他人维护）时，您不希望手动执行此操作（在源文件中）。是否有更好的方法导出所有函数？@JoshuaSmith如果是这样，您可以将所有函数定义为module.exports.helloWorld=函数helloWorld（）{…}。据我所知，无法导出所有函数，因此这可能是最接近您的函数了。@frxstrem-我已经按照您的步骤进行了操作，效果很好，谢谢。但我只能使用该方法访问一个导出。假设我有两个模块，每个模块导出一个函数，当我按照上面的步骤操作时，如何访问这两个函数？我不完全理解你之前的评论。。。
/** 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,
};

<script>
  ui.helloWorld(); // 'ui.helloWorld' is the same as
                   // 'module.exports.helloWorld' above
</script>