Vue CLI 4发布：自动化升级过程，支持自定义包管理器

Vue CLI团队最近把他们的命令行工具更新到了4.0.0版本。这一版本可以帮助开发者自动化升级过程，可以使用额外的包管理器，并可以更准确更有效移除DOM中多余的空格。

在Vue CLI 3中，“vue build”命令并不会基于vue.config.js的配置生成manifest.json文件。新版本加入了pwa.manifestOptions配置字段，可以根据配置对象生成manifest.json文件，不需要从项目公共文件夹拷贝这个文件了。这一变更为Vue PWA的配置管理提供了更为一致的接口。

在之前的版本中，为不同的模式运行Vue命令会生成不一样的目录布局。而在最新的版本中，为所有模式生成的目录布局都是一样的。

在Vue CLI 4中，开发者可以在vue create命令后面通过添加–packageManager [packagename]来指定不一样的Node包管理器。

要从Vue CLI 3升级到4，需要执行vue upgrade命令。在版本3中，这个命令只会安装最新的Vue CLI插件。而在版本4中，Vue CLI会运行升级插件，自动进行升级。

现在，在执行vue upgrade命令时，如果CLI发现当前代码库里有未提交的代码修改，它会与用户确认。

空格处理也在Vue CLI4中得到了改进。对于以下这个模板：

<p>
  Welcome to <b>Vue.js</b> <i>world</i>.
  Have fun!
</p>

在Vue CLI 3中，如果preserveWhitespace设置成false就会把这个模板编译成：

<p> Welcome to <b>Vue.js</b><i>world</i>. Have fun! </p>

这样会出现不期望的结果：

Welcome to Vue.jsworld. Have fun!

新版本的CLI为开发者提供了whitespace: 'condense’选项来解决这个问题：

<p> Welcome to <b>Vue.js</b> <i>world</i>. Have fun! </p>

输出结果正如我们期望的那样：

Welcome to Vue.js world. Have fun!

新的CLI配置能够更准确更有效地移除多余的空格。

最新版的Vue CLI对底层的主要依赖进行了升级。除了core-js-3、Nightwatch 1.x和Jest 24，Vue CLI 4还加入了Mocha 6、workbox-webpack-plugin，等等。

Vue CLI 4的另一个改进是在应用插件的生成器时能够更好地处理异步操作。Vue CLI 4支持生成器的异步函数。另外，新引入的afterInvoke和afterAnyInvoke钩子可以监听插件对另一个插件的调用。

要了解更多有关Vue CLI 4的信息，可以参考Vue CLI升级指南。

Vue CLI基于MIT开源许可协议。开发者可以通过GitHub的vue-cli项目参与贡献，并遵循Vue CLI贡献指南。

原文链接：

Vue.js CLI 4 Released