Laravel 5.5+Webpack：如何将打包的Helper函数暴露到全局作用域

我之前在Laravel项目里用Webpack打包模块时，也碰到过一模一样的问题——模块内部能正常调用，但页面内联脚本死活访问不到。正好给你几个能满足你保留$mh命名空间需求的解决方案：

方法一：手动挂载到window对象（最简单直接） #

Webpack默认会把所有模块包裹在闭包里，所以模块里的变量和函数不会自动暴露到全局作用域。你只需要在app.js里导入helpers.js之后，把$mh挂载到浏览器的全局window对象上就行：

// resources/assets/js/app.js
import * as $mh from './helpers.js';

// 将$mh挂载到全局window对象，让页面脚本能访问
window.$mh = $mh;

这样操作后，页面底部的内联脚本直接用$mh.valRemoveHighlight(element);就能调用函数了，完全符合你的理想状态。

方法二：通过Webpack配置全局暴露（更规范的批量处理） #

如果你不想手动给每个模块做挂载，也可以通过Laravel Mix的Webpack配置来统一处理。修改项目根目录下的webpack.mix.js，添加output配置项：

// webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
    .webpackConfig({
        output: {
            // 指定全局变量名
            library: '$mh',
            // 指定挂载到window对象上
            libraryTarget: 'window'
        }
    });

然后在app.js里把导入的$mh导出：

// resources/assets/js/app.js
import * as $mh from './helpers.js';

// 导出模块供Webpack全局挂载
export default $mh;

打包完成后，Webpack会自动把你的$mh模块挂载到window对象上，页面脚本同样可以直接用$mh.valRemoveHighlight(element);调用。

重要注意事项 #

不管用哪种方法，一定要确保app.js的加载顺序在页面内联脚本之前！比如在Laravel Blade模板里，你可以把app.js的引用放在模板头部或者<body>标签的前半部分，内联脚本放在</body>标签前；如果用了Blade的@stack('scripts')，记得把内联脚本通过@push('scripts')放到栈里，保证它在app.js之后加载。

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