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

【问题标题】：Declaring global helper functions and understand the namespace when using laravel-mix / webpack使用 laravel-mix / webpack 时声明全局辅助函数并理解命名空间
【发布时间】：2018-06-28 02:10:14
【问题描述】：

我对 webpack 完全陌生（我以前通过“手工”包含大量 css / js 文件来构建我的应用程序），现在我正在尝试了解命名空间在使用命名工具时是如何工作的。

我有一个 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 文件中定义的函数之一时，我发现它们是“未定义的”，即使在“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 预先打包的文件。在 window.HelperFunctions 下注册组件是使它们在整个网站动态生成的<script></script> 标签中可用的唯一方法吗？

【问题讨论】：

这个答案可以帮到你，是同一个场景stackoverflow.com/a/50485278/2071578

标签： javascript node.js webpack laravel-mix

【解决方案1】：

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

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

【讨论】：