使用 babel 和 laravel-mix 将 ES6 转换为 ES2015答案

【问题标题】：Convert ES6 to ES2015 using babel and laravel-mix使用 babel 和 laravel-mix 将 ES6 转换为 ES2015
【发布时间】：2019-02-20 11:46:23
【问题描述】：

我的 Vue 组件中有 ES6 JavaScript 代码。为了支持 IE 11，我需要使用 babel 和 laravel-mix 将其转换为 ES5 代码。我该怎么做？

这是我的 webpack.mix.js 文件。

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/admin-app.js', 'public/js')

【问题讨论】：

标签： laravel babeljs laravel-mix

【解决方案1】：

有一个mix.babel() 命令可以处理这个问题。

它与mix.scripts() 相同，因此需要更多的跑腿工作。我作弊并这样做，然后将 es5.js 提供给 IE：

mix.js('resources/assets/js/app.js', 'public/js')
  .babel('public/js/app.js', 'public/js/app.es5.js')
  .sass('resources/assets/sass/app.scss', 'public/css');

【讨论】：

我得到“mix.combine() 需要一个完整的输出文件路径作为第二个参数。”，当尝试使用“mix.js('resources/assets/js/app.js' , 'public/js') .js('resources/assets/js/admin-app.js', 'public/js') .babel('resources/assets/js/spa.js', 'public/js' )"
需要指定输出文件。我的 babel 行中有一个 js 文件名 app.es5.js。
这样的东西有用吗？ "mix..js('resources/assets/js/spa.js', 'public/js/spa.js') .babel('public/js/spa.js', 'public/js/spa.js' )"

【解决方案2】：

代码不是 100% 正确：babel 第一个参数应该是一个数组：

mix.js('resources/assets/js/app.js', 'public/js')
     .babel(['public/js/app.js'], 'public/js/app.es5.js')
     .sass('resources/assets/sass/app.scss', 'public/css');

【讨论】：

【解决方案3】：

我更愿意将app.js 作为我的最终 js 输出。这是首选的命名约定。所以和其他人一样，如果 babel 对你有用，那么

webpack.confog.js

mix.js('resources/assets/js/app.js', 'public/js/app1.js')
  .babel('public/js/app1.js', 'public/js/app.js')
  .sass('resources/assets/sass/app.scss', 'public/css');

有了这个，我仍然在我的应用程序中维护public/js 和入口点。

但我更喜欢使用我在此处发布的解决方案： Laravel Mix: Configure Babel for IE11 compatibility (transformations and polyfills)

【讨论】：