如何在 Laravel webpack.mix.js 中添加全局函数？答案

【问题标题】：How to add global functions in Laravel webpack.mix.js?如何在 Laravel webpack.mix.js 中添加全局函数？
【发布时间】：2018-12-12 23:41:46
【问题描述】：

我正在使用 Laravel mix 来编译我的资产并将它们组合成一个文件。我创建了一个新的 js 文件并在其中编写了一些方法。我将此文件与 app.js 文件结合在一起。当我尝试调用这些方法时，从我的刀片文件中收到错误 function not defined 。我无法访问这些方法。

请帮我调用这些方法。

Laravel 混合代码

mix.js([ 'js/app.js',
         'js/custom.js'
        ], 'public/js'),
.....

Custom.js

function test(){
  alert('test')
}

test.blade.php

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
    test();
</script>

错误：未定义测试

【问题讨论】：

在您尝试使用test();之前是否包含app.js？
是的，当我查看app.js的源代码时，该方法存在于app.js最底部的app.js中。其他事件正在运行，但功能无法访问。
您是否包含test() 上方的文件？我在test.blade.php 的任何地方都没有看到<script src="app.js"></script>
其实它是在 test.blade.php 中添加的，但我忘了告诉你。现在发布更新。

【解决方案1】：

不只是将新文件连接到app.js 的末尾，更简洁的方法（恕我直言）是让您的webpack.mix.js 保持不变。

在resources/assets/js 中创建您的custom.js 文件，然后在resources/assets/js/app.js 的底部添加require('./custom');

这将作为其余构建过程的一部分。

【讨论】：

【解决方案2】：

试试这个：

custom.js

function test(){
    alert('test')
}

export { test };

app.js

...
import { test } from './custom.js';

【讨论】：

【解决方案3】：

只需将其分配给 window。所以在你的 Custom.js 中

window.test = function(){
  alert('test')
}

并在你的 test.blade.php 中使用它：

<script type="text/javascript">
    window.test();
</script>

【讨论】：