Laravel 5.3 Elixir Webpack未转译Object.assign至ECMAScript 2015问题

我来帮你搞定这个问题——之前维护Laravel 5.x项目时我也碰到过类似的情况，下面是几个经过验证的解决方案：

方案1：添加Babel插件专门处理Object.assign #

Object.assign是ES2015的原生方法，默认的Elixir Vue 2集成配置可能没包含转译它的插件。你可以安装babel-plugin-transform-object-assign来解决：

• 先安装这个开发依赖：

npm install babel-plugin-transform-object-assign --save-dev

• 接着在项目根目录新建一个.babelrc文件，写入以下配置：

{
  "plugins": ["transform-object-assign"]
}

重新运行gulp编译后，Webpack就会把Object.assign转译为ES5兼容的代码了。

方案2：确保babel-polyfill正确加载 #

你已经在gulpfile里引入了babel-polyfill，但它需要在所有业务代码之前加载才能生效。有两种方式配置：

方式A：在入口文件顶部引入 #

打开resources/assets/js/app.js，把这行代码放在最开头：

import 'babel-polyfill';

方式B：在gulpfile里配置Webpack入口 #

修改你的gulpfile.js，把polyfill加入到Webpack的入口数组中：

const elixir = require('laravel-elixir');
require("babel-polyfill");
require('laravel-elixir-vue-2');

elixir(mix => {
    mix.webpack('app.js', null, null, {
        entry: ['babel-polyfill', './resources/assets/js/app.js']
    });
});

这样polyfill会提前注入Object.assign的兼容实现，低版本浏览器也能正常运行你的代码。

方案3：更新依赖版本（针对旧版本兼容问题） #

Laravel 5.3对应的Elixir版本比较老旧，可能存在依赖兼容问题。你可以更新相关依赖到适配的版本：

1. 修改package.json里的devDependencies部分：

{
  "devDependencies": {
    "laravel-elixir": "^6.0.0-15",
    "laravel-elixir-vue-2": "^0.3.0",
    "babel-polyfill": "^6.26.0",
    "babel-plugin-transform-object-assign": "^6.22.0"
  }
}

2. 删除旧的依赖并重新安装：

rm -rf node_modules && npm install

3. 重新执行编译：

gulp

验证是否解决 #

编译完成后，打开public/js/app.js搜索Object.assign，如果看到它被转译为普通的函数实现，或者polyfill的代码已经注入，就说明问题解决了。

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