Laravel 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
        }
    }
});
复制代码