Laravel Mix 4升级说明与“排坑儿”指南

本篇是咱们系列课程《Laravel5.7优雅实战入门：第二版》和《Laravel 5.7&Vue 2.x深度整合实战：第二版》的扩展阅读。

更好的阅读体验请移步：www.pilishen.com/posts/larav…

在2019年1月份，laravel mix这个默认的前端资源管理工具，升级到了4.0版本，因为是刚刚升级，可能还存在不少的bug与报错，因此在此统一汇总解决一下。

(一)官方的新版本特性与好处：

• 更快的编译速度
• 更快的npm install安装速度
• 背后依赖的webpack升级到了4
• vue-loader升级到了15
• Babel升级到了7
• 自动的依赖抽离。若是你调用mix.extract()方法，不加任何参数，全部的组件依赖（你从node_modules/引入的任何第三方组件），就都会被自动地抽离出来
• css的压缩（基于cssnano）选项能够进一步添加了
• PostCSS的插件，能够在单独的调用中传到mix.sass/less/stylus()中了。这意味着若是须要的话，每次的mix.sass()调用，你均可以往里面添加独特的PostCSS plugins
• JS的优化和压缩依赖，由原来的Uglify变为Terser
• SASS的优化和压缩依赖，由原来的node-sass变为Dart Sass。这个变更会稍微增长编译的时间，好处是在npm install的时候，能更快、更稳定
• 改进了Bebel配置的融合策略。如今能够覆写或更改任何Mix里提供的、默认的Babel插件（plugins）和预设（presets）了，只须要在项目根目录建立一个.babelrc文件便可

(二)如何从以前的版本升级到Mix 4

npm remove laravel-mix
npm install laravel-mix@^4.0.0 --save-dev
复制代码

升级了之后，若是你遇到跟vue-template-compiler相关的问题，多半是由于vue和vue-template-compiler的版本号要如出一辙才行，当两个版本不一致时就会报mismatch的错误，因此只须要更新vue和vue-template-compiler其中一个的版本号，让它跟另外一个一致便可。

(三)注意事项

• 若是你的项目重度使用了JS的动态引入（dynamic imports），可能你得等到下一年webpack 5发布后再更新。在那以前，这方面会存在一些已知的编译问题，并且没法修复。一旦webpack 5发布了，Mix也会随后更新。若是你还不懂JS的动态引入（dynamic imports），那么极可能这不会影响到你的项目。（传统上咱们import后面加上字符来引入组件或其余的js文件，新近的js支持import()做为一个方法来调用组件，这样返回的就是一个Promise，方便作一些组件的延迟加载之类）
• Sass支持如今是一个按需的组件了。在以前的版本里，Mix默认就带着node-sass和sass-loader，无论你的项目是否真的须要sass编译。为了提升组件安装（npm installs）的时间，这两个sass相关的组件，就成了按需安装，也即只有当你使用到了mix.sass()命令，它们才会被自动安装。当你初次运行npm run dev，而且用到了sass()方法时，相应依赖就会被安装，存到dev-dependencies列表里。

(四)初次npm install或yarn install提示webpack-cli相关的错误

若是你是一个全新的项目，在初次执行npm install或yarn install的时候，颇有可能会出现以下相似的错误：

error ···\mix-test\node_modules\webpack-cli: Command failed.
Exit code: 1
Command: lightercollective
Arguments:
Directory: ···\mix-test\node_modules\webpack-cli
Output:
'lightercollective' is not recognized as an internal or external command,
operable program or batch file.
复制代码

它会说webpack-cli命令失败，还说什么webpack-cli目录下的'lightercollective'找不到，这个的缘由是到了webpack 4的时代，webpack和webpack-cli再也不是一个组件了，原来它们是一块的，如今webpack-cli独立出来了，得单独安装一下：

yarn add webpack-cli
复制代码

或者

npm install webpack-cli
复制代码

通常这样以后，再执行npm install或yarn install，就没问题了。若是安装了还有问题，那么可能你是老的项目或者老的环境，可能webpack的版本还不是4，就跟webpack-cli对应不起来了，期间还会涉及到全局的webpack和webpack-cli，以及本项目的webpack和webpack-cli之间的冲突，这种时候，若是你实在不肯意折腾，就干脆package.json里将laravel-mix的版本号改成3.0.0，而后再安装就得了

(五)ES模块的引入（JS组件的require或import）

因为vue-loader 15的更新，若是你在引入ES模块的时候使用了 CommonJS的格式，也即require()的方式，你就须要在后面追加上.default，例如这样：

Vue.component(
    'example-component', 
-   require('./components/ExampleComponent.vue')
+  require('./components/ExampleComponent.vue').default
);
复制代码

将原来require()的方式，转换成ES的import ... from '...'的方式，是更推荐的：

import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);
复制代码

(六)由Node Sass 转到 Dart Sass

由Node Sass 转到 Dart Sass，虽然大同小异，可是编译期间你可能会遇到一些变化、或警告信息，你能够一点点地将报错解决掉，也能够自行切换回node-sass：

npm install node-sass
复制代码

mix.sass('resources/sass/app.sass', 'public/css', {
    implementation: require('node-sass')
});
复制代码

(七)Vue组件里的sass编译

若是你的项目里没有调用过mix.sass()方法，由于这样的话它就会自动安装sass相关的依赖，可是你只是在vue组件里的style标签上声明了lang="sass"，那么你就须要单独安装node-sass 或 sass。 由于Mix没法知道你会在Vue组件里具体用哪一个样式处理器，因此你得自行安装相应组件。

好比你能够这样

npm install node-sass sass-loader
复制代码

或者

npm install sass sass-loader 
复制代码

一样的道理也适用于less和Stylus

(八)彻底删掉了 fastSass() 和 standaloneSass() 两个方法

fastSass() 和 standaloneSass() 两个方法被彻底移除了，后者只是前者的一个别名的方法而已。

为了提升只是须要编译css这部分人的性能需求，fastSass() 和 standaloneSass() 这两个方法能够将sass编译跟webpack的基本编译分离开来，可是呢，彷佛对新手来讲，这更容易让人困惑。升级后，你得将以前的mix.fastSass()改为mix.sass()。

- mix.fastSass()
- mix.standaloneSass()
+ mix.sass()
复制代码

(九)删掉了调用Mix时的.mix后缀属性

删掉了已被弃用的.mix属性，若是你的webpack.mix.js文件里有require('laravel-mix').mix，得改为require('laravel-mix')：

- require('laravel-mix').mix
+ require('laravel-mix')
复制代码

(十)Babel 7的支持

Babel官方的插件命名空间有所改变，都统一改为了@babel名下。你须要更新package.json文件，将其中全部babel-plugin-[name]相关的以下更改：

- "babel-plugin-[name]": "6.x"
+ "@babel/plugin-[name]": "7.x"
复制代码

若是你以前建立过.babelrc文件，那么在其中也相应更改：

- "plugins": ["babel-plugin-transform-object-rest-spread"]
+ "plugins": ["@babel/plugin-proposal-object-rest-spread"]
复制代码

(十一)从Uglify 转到 Terser

若是你项目里有更改过以前Uglify的一些配置，好比经过Config.uglify = {},你就得改为Config.terser = {}，具体的配置大部分都是同样的。

Terser配置API

webpack.mix.js:

mix.options({
-    uglify: {
-        uglifyOptions: {
+    terser: {
+        terserOptions: {
           warnings: true
        }
    }
});
复制代码