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

Question

我是 webpack 的新手(我以前通过"手动"包含大量 css/js 文件来构建我的应用程序)，现在正在尝试了解命名空间在使用命名工具时的工作方式。

我有一个应用程序.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');

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

function foo_bar(A, B) {
return A - B;
}
/* more functions, following the same structure... */

但是每次我尝试使用helperFunctions文件中定义的函数之一时，我发现它们是"未定义的"，即使在"require"发生后直接在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 预先打包的文件。 正在窗口下注册组件。帮助程序函数 使它们在整个网站动态生成的<script></script>标签中可用的唯一方法？

Answer 1

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

window.myHelperMethod = function () { console.log('ayo, this works!') }