javascript - Uncaught ReferenceError - 如何访问webpack打包的函数

Question

我正在使用 https://github.com/sloria/cookiecutter-flask对于一个项目，我正在尝试将 javascript 函数添加到由 webpack 捆绑的 js 文件并从 html 访问它。我想我缺少一些基本的东西。

背景源文件:

• > https://github.com/sloria/cookiecutter-flask/blob/master/%7B%7Bcookiecutter.app_name%7D%7D/webpack.config.js
• > https://github.com/sloria/cookiecutter-flask/blob/master/%7B%7Bcookiecutter.app_name%7D%7D/assets/js/plugins.js

我正在将以下代码添加到 plugins.js:

function foo () {
    console.log('bar')
}

并尝试从 html 文档中调用它以进行如下测试

<script type="text/javascript">
    foo();
</script>

我可以看到我的函数已绑定(bind)，但我无法访问它。

这是我得到的错误:

我已经必须将 expose-loader 添加到我的 webpack.config.js 以使 jquery 按照 this issue 工作:

Answer 1

根据我的经验，当我使用 Webpack 时，我将代码捆绑到模块中，模块将它们封装到该模块的范围内。我希望在模块外可用的代码我显式export，然后import或require它到我想要的新范围访问它。

这听起来像是您希望您的一些代码可以在全局 范围内访问，以便直接从您的标记访问它。要在浏览器中执行此操作，最好的办法是将其直接附加到 Window 对象。可能首先检查以确保您没有覆盖该命名空间中已有的内容:

function foo() {
    console.log('bar!');
}

if (!Window.foo) {
    Window.foo = foo;
} else {
    console.warn('Foo is already assigned!');
}

也就是说，我建议您避免以这种方式进行开发——污染全局命名空间通常不是一个好的模式，并且会导致很多潜在的冲突。如果您必须以这种方式工作，至少将一个对象分配给附加到 Window 的 namespace ，您可以在其中放置应用程序功能，而不会冒与其他 Window< 冲突的风险属性:

Window.myApp = {
    foo: function () {
        console.log('bar!');
    }
}

Window.myApp.printGreeting = function () {
    console.log('Hello!');
}

// ...etc