如何使用Laravel Mix将JS编译为ES5？

Question

我有一个基于laravel Vue的应用程序，它在chrome和firefox上运行完美。但是在Edge或IE11上无法运行，并且控制台显示箭头函数错误！？ 如何使用laravel mix和webpack编译或转译为es5？ 您能展示一下webpack.mix.js的正确配置吗？ 非常感谢。

- B nM

Answer 1

2020年2月更新

如果有人仍需要帮助，请注意，mix已经提供了将代码编译为ES5的Babel编译：

与 mix.scripts() 稍微不同的是，mix.babel() 的方法签名与之相同; 然而，合并后的文件将接受Babel编译，它将把任何ES2015代码转换为所有浏览器都能够理解的标准JavaScript。

你可以像这样使用它:

mix.babel(['public/js/es6file.js'], 'public/js/app.es5.js')

文档

- Marcelo The Mage Coder

Answer 2

为了将你的es6代码编译成es5，请按照以下步骤进行：

1）安装babel-env预设

npm install @babel/preset-env --save

然后在根目录的 .babelrc 文件中声明：

Original Answer 翻译成 "最初的回答"。

{
  "presets": ["@babel/preset-env"]
}

2) compile your code using

npm run dev //for dev environment

或者

npm run prod // for production environment

- Ewomazino Ukah

---

我按照你的指示做了，现在我在“...this”和任何带有“this”关键字的地方都遇到了错误。这让我感到非常沮丧。 - B nM

非常抱歉，你遇到了什么具体的错误？你可以展示一下代码片段吗，这样我就能看出问题出在哪里了。 - Ewomazino Ukah

Answer 3

经过大量搜索，我发现这个Vue组件导致了错误 "https://github.com/godbasin/vue-select2"，我该如何将其编译为es5。

边缘控制台错误： 预期的标识符、字符串或数字

它显示的相应行是：

setOption(val = []) {
      this.select2.empty();
      this.select2.select2({
----->     ...this.settings,
        data: val
      });
      this.setValue(this.value);
    },

抱歉浪费了您的时间

- B nM