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
        }
    }
});
複製代碼