Laravel 5.6中Webpack Mix打包后自定义JS函数找不到的问题

这个问题其实是Webpack（Laravel Mix基于它构建）的模块作用域特性导致的——默认情况下，你在JS文件里定义的函数只会存在于当前模块的局部作用域中，不会自动挂载到全局的window对象上，所以视图里的testAlert()调用自然找不到对应的函数。

给你几个可行的解决方案：

方案1：手动将函数挂载到window对象（最直接） #

修改你的funcionesJquery.js，把函数绑定到window上：

alert("LOADEAD");
window.testAlert = function(){
 alert("TEST");
}

这样testAlert就变成了全局可用的函数，视图里的调用就能正常执行了。

方案2：用Webpack ProvidePlugin批量暴露全局函数 #

如果需要暴露多个全局函数，这种方式更便于管理。首先在webpack.mix.js顶部引入webpack：

const webpack = require('webpack');

然后在Mix配置里添加全局暴露的插件：

mix.js([
    'resources/assets/js/backend/before.js',
    'resources/assets/js/backend/app.js',
    'resources/assets/js/backend/after.js',
    'resources/assets/js/backend/funcionesJquery.js',
    'resources/assets/js/backend/events.js',
], 'public/js/backend.js')
.webpackConfig({
    plugins: [
        new webpack.ProvidePlugin({
            testAlert: ['resources/assets/js/backend/funcionesJquery.js', 'testAlert'],
            // 其他需要全局暴露的函数可以按这个格式添加
        })
    ]
});

方案3：用IIFE包裹并挂载到window #

这是一种传统的全局变量声明方式，把你的函数包裹在立即执行函数里，手动挂载到window：

(function(window) {
    alert("LOADEAD");
    function testAlert(){
        alert("TEST");
    }
    window.testAlert = testAlert;
})(window);

最后别忘了重新运行打包命令：npm run dev（开发环境）或者npm run production（生产环境），确保你的修改被打包到最终的backend.js里。

内容的提问来源于stack exchange，提问作者pmiranda