[5] Vue-Cli 的 Babel 插件

背景知识

工程类项目babel最佳实践：

// babel7.4.x之后
@babel/preset-env + core-js + regenerator-runtime 配合 按需加载（useBuiltIns: "usage"）

core-js@3 特性概览：

• 支持ECMAScript稳定功能，引入core-js@3冻结期间的新功能，比如flat
• 加入到ES2016-ES2019中的提案，现在已经被标记为稳定功能
• 更新了提案的实现，增加了proposals配置项，由于提案阶段不稳定，需要谨慎使用
• 增加了对一些web标准的支持，比如URL 和 URLSearchParams
• 现在支持原型方法，同时不污染原型
• 删除了过时的特性

vue-cli如何处理babel

项目A背景："@vue/cli-service": "^3.12.0"

（1）

// babel.config.js
module.exports = {
    presets: ['@vue/app'], // babel-preset-app的缩写。
}

可以看到vue-cli 用的预设集合是自己封装的@vue/app即 @vue/babel-preset-app。

（2）babel-preset-app

可以看到依赖里有 core-js 2.x 版本和@babel/preset-env ～

（3）打开@vue/app 的 index.js

由上，我们可以得出结论，vue-cli 4.5.3 使用的 vue-preset-app 封装了@babel/preset-env`，且配置默认配置了useBuiltIns: 'usage';按需加载。

corejs没做配置，所以默认为2。

即：

useBuiltIns: 'usage';
corejs: 2;

项目B背景：vue-cli版本：4.5.13

babel-preset-app的package.json

vue-cli 4.x版本使用的是core.js@3.x版本。

结论

vue-cli 3 使用的是 core-js2.x 版本。

vue-cli在V4升级core-js@3.x版本。

最好的办法清楚你的vue-cli版本，然后再去选择性使用ES6+语法。

参考

corejs@2.x 和 core@3.x

corejs具体提供了那些能力，可参考node-modules 下的core-js