使用laravel-mix / webpack时声明全局辅助函数并理解命名空间

Question

我对webpack完全不熟悉（我之前通过包含大量的css / js文件来构建我的应用程序＆＃34; hand＆＃34;）现在我正在尝试了解命名空间在使用命名工具时的工作方式。< / p>

我有一个app.js

require('./bootstrap');

require('./helperFunctions');

/* ... more, unrelated stuff */

webpack.mix.js与laravel 5.5示例项目提供的原始文件不相同

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

我的helperFunctions.js是一个简单的js文件，其中包含一些我希望在整个项目中使用的有用函数：

function foo_bar(A, B) {
    return A - B;
}

/* more functions, following the same structure... */

但每当我尝试使用helperFunctions文件中定义的函数之一时，我发现它们是＆＃34;未定义＆＃34;，即使在＆＃39; require＆＃39;之后的app.js文件中也是如此。发生。

在检查生成的app.js文件后，我发现我的函数被封装在一个匿名函数function(module, exports) { /* my File contents go here */ }中，导致它们对其余的脚本不可用。

虽然我明白这可以减少污染全局命名空间，但我不明白我应该如何定义全局对象（例如vue的数据存储对象）或辅助函数等函数。

任何人都可以解释这是如何工作的，或者将我链接到一个资源来解释这个从未使用资产编译器的人（如果这是一个正确的终点）。

欢呼声

//编辑：我认为我找到了一个解决方案，在遇到这个问题之后： https://nodejs.org/api/modules.html#modules_modules

我将辅助函数文件编辑成如下：

module.exports = {
    foo_bar(A, B) {
        return (A - B);
    },

    /* ... more functions ... */
}

然后将它导入到我需要的任何地方：

import HelperFunctions from './helperFunctions'

var result = HelperFunctions.foo_bar(5, 8);

但是，这仅适用于使用webpack预打包的文件。在window.HelperFunctions下注册组件是在整个网站中动态生成的<script></script>标签中使用它们的唯一方法吗？

Answer 1

正如您所建议的那样，在窗口对象上注册您的帮助方法是一种简单易懂的方法，因此，如果我希望这些方法在全球范围内可用，那我将选择这样做。

name     clothes  furniture  electronics
shop1       5        3          100