node升级命令_LaravelMix4升级说明与“排坑儿”指南

本篇是我们系列课程《Laravel5.7优雅实战入门&＃xff1a;第二版》和《Laravel 5.7&Vue 2.x深度整合实战&＃xff1a;第二版》的扩展阅读。
想要更好的阅读体验&＃xff0c;请观看原文出处&＃xff1a;Laravel Mix 4升级说明与“排坑儿”指南
在2019年1月份&＃xff0c;laravel mix这个默认的前端资源管理工具&＃xff0c;升级到了4.0版本&＃xff0c;由于是刚刚升级&＃xff0c;可能还存在很多的bug与报错&＃xff0c;所以在此统一汇总解决一下。

(一)官方的新版本特性与好处&＃xff1a;

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

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

升级了以后&＃xff0c;如果你遇到跟vue-template-compiler相关的问题&＃xff0c;多半是因为vue和vue-template-compiler的版本号要一模一样才行&＃xff0c;当两个版本不一致时就会报mismatch的错误&＃xff0c;所以只需要更新vue和vue-template-compiler其中一个的版本号&＃xff0c;让它跟另一个一致即可。

(三)注意事项

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

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

如果你是一个全新的项目&＃xff0c;在初次执行npm install或yarn install的时候&＃xff0c;很有可能会出现如下类似的错误&＃xff1a;

它会说webpack-cli命令失败&＃xff0c;还说什么webpack-cli目录下的&＃39;lightercollective&＃39;找不到&＃xff0c;这个的原因是到了webpack 4的时代&＃xff0c;webpack和webpack-cli不再是一个组件了&＃xff0c;原来它们是一块的&＃xff0c;现在webpack-cli独立出来了&＃xff0c;得单独安装一下&＃xff1a;

或者

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

(五)ES模块的引入&＃xff08;JS组件的require或import&＃xff09;

由于vue-loader 15的更新&＃xff0c;如果你在引入ES模块的时候使用了 CommonJS的格式&＃xff0c;也即require()的方式&＃xff0c;你就需要在后面追加上.default&＃xff0c;例如这样&＃xff1a;

将原来require()的方式&＃xff0c;转换成ES的import ... from &＃39;...&＃39;的方式&＃xff0c;是更推荐的&＃xff1a;

(六)由Node Sass 转到 Dart Sass

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

(七)Vue组件里的sass编译

如果你的项目里没有调用过mix.sass()方法&＃xff0c;因为这样的话它就会自动安装sass相关的依赖&＃xff0c;但是你只是在vue组件里的style标签上声明了lang&＃61;"sass"&＃xff0c;那么你就需要单独安装node-sass 或 sass。 因为Mix无法知道你会在Vue组件里具体用哪个样式处理器&＃xff0c;所以你得自行安装相应组件。

比如你可以这样

或者

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

(八)完全删掉了 fastSass() 和 standaloneSass() 两个方法

fastSass() 和 standaloneSass() 两个方法被完全移除了&＃xff0c;后者只是前者的一个别名的方法而已。

为了提高只是需要编译css这部分人的性能需求&＃xff0c;fastSass() 和 standaloneSass() 这两个方法可以将sass编译跟webpack的基本编译分离开来&＃xff0c;但是呢&＃xff0c;似乎对新手来说&＃xff0c;这更容易让人困惑。升级后&＃xff0c;你得将之前的mix.fastSass()改成mix.sass()。

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

删掉了已被弃用的.mix属性&＃xff0c;如果你的webpack.mix.js文件里有require(&＃39;laravel-mix&＃39;).mix&＃xff0c;得改成require(&＃39;laravel-mix&＃39;)&＃xff1a;

(十)Babel 7的支持

Babel官方的插件命名空间有所改变&＃xff0c;都统一改成了&＃64;babel名下。你需要更新package.json文件&＃xff0c;将其中所有babel-plugin-[name]相关的如下更改&＃xff1a;

如果你之前创建过.babelrc文件&＃xff0c;那么在其中也相应更改&＃xff1a;

(十一)从Uglify 转到 Terser

如果你项目里有更改过之前Uglify的一些配置&＃xff0c;比如通过Config.uglify &＃61; {},你就得改成Config.terser &＃61; {}&＃xff0c;具体的配置大部分都是一样的。

Terser配置API

webpack.mix.js: