Laravel Mix: Uncaught ReferenceError: babelHelpers is not defined

介绍

在使用 Laravel Mix 进行前端资源编译和打包时，有时会遇到 'Uncaught ReferenceError: babelHelpers is not defined' 这样的错误。这个错误通常出现在使用 Babel 编译 JavaScript 代码时。

问题原因

这个错误通常是由于未正确配置 Babel 编译选项导致的。Babel 提供了一个叫做 babelHelpers 的全局变量，它通常用于帮助处理一些特殊的代码转换操作。在使用 Laravel Mix 编译时，如果 BabelHelpers 未正确导入或配置，就会出现该错误。

解决方案

要解决 'Uncaught ReferenceError: babelHelpers is not defined' 错误，可以按照以下步骤操作：

1. 确保安装了 @babel/preset-env 和 @babel/plugin-transform-runtime 这两个 Babel 插件，可以使用以下命令进行安装：

   npm install --save-dev @babel/preset-env @babel/plugin-transform-runtime
   

2. 在项目的 .babelrc 文件中添加以下内容：

   {
       "presets": [
           [
               "@babel/preset-env",
               {
                   "useBuiltIns": "usage",
                   "corejs": 3
               }
           ]
       ],
       "plugins": [
           "@babel/plugin-transform-runtime"
       ]
   }
   

   这样配置可以保证正确加载和使用 babelHelpers。

3. 如果步骤 2 中的配置无效，可以尝试在 webpack.mix.js 文件中的 mix.js 方法中添加一个回调函数，手动指定 browserslist：

   mix.js('resources/js/app.js', 'public/js')
       .babelConfig({
           plugins: ['@babel/plugin-syntax-dynamic-import'],
           presets: [
               [
                   '@babel/preset-env',
                   {
                       targets: '> 0.25%, not dead',
                       useBuiltIns: 'usage',
                       corejs: 3,
                   },
               ],
           ],
       });
   

4. 重新构建前端资源并运行项目：

   npm run dev
   

   这样应该能够解决 'Uncaught ReferenceError: babelHelpers is not defined' 错误。

小结

通过正确配置 Babel 编译选项，可以解决 'Uncaught ReferenceError: babelHelpers is not defined' 错误。确保安装了相应的 Babel 插件并正确配置 .babelrc 文件或 webpack.mix.js 文件，在重新构建前端资源后，错误应该能够解决。