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>

我可以看到我的函数已被捆绑，但我无法访问它。

这是我得到的错误:

我已经必须将公开加载程序添加到我的 webpack.config.js 中才能使 jquery 按照 this issue 工作。 :

Answer 1

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

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

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

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

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

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

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

// ...etc