总结
npx babel-upgrade --write自动更换依赖中的Babel版本- 更换
babelrc配置 - 更换
eslint配置
原始配置
// .babelrc
{
"presets": [
// 用来在vue中写jsx的
["@vue/babel-preset-jsx"], // @babel/transform-vue-jsx 支持的是Babel6+
[
"@babel/env",
{
"targets": {
"chrome": 52,
"browsers": ["last 2 versions", "safari 7"]
},
"modules": false,
"useBuiltIns": "usage" // polyfill 由于@babel/polyfill已经快被废弃，该选项依赖babel/polyfill,所以不建议用此选项
}
]
],
"sourceType": "unambiguous", // 项目中有些地方import跟module.exports混用了，webpack2不支持 但是配置了还是无效
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": false, // corejs 是一个给低版本的浏览器提供接口的库，如 Promise, map, set 等。设置false不会对polyfill进行处理 如果不是开发js库 常规的业务设置false
"helpers": true, // 辅助函数是否抽取出来，避免重复
"regenerator": true, // 同babel-plugin-transform
"useESModules": true // 使用 es modules helpers, 减少 commonJS 语法代码
}
],
["@babel/plugin-syntax-dynamic-import"],
["@babel/plugin-transform-modules-commonjs"], // 解决import跟module.exports混用的问题
["@babel/plugin-proposal-nullish-coalescing-operator"] 坑爹，虽然官方说babel-preset-env支持了 但是其实并不
// As I know so far that babel preset-env won't support stage-x plugin. This
// babel/plugin-proposal-nullish-coalescing-operator seems to be at stage-4
// for now which means you have to keep using this as plugin.
],
"comments": false,
"env": {
"test": {
"plugins": ["istanbul"]
}
}
}
// eslintrc.js
parserOptions: {
// eslint7才支持es2020 7.5支持非空运算符
ecmaVersion: 2020,
"sourceType": "module",
ecmaFeatures: {
experimentalObjectRestSpread: true
//jsx: true
},
},
修正版本
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": 52,
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
},
"modules": false,
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": {
"version": 3,
"proposals": true // 引入所有该版本的提案 注意是提案（建议）不是标准
}, // 关闭其对polyfill的处理
"helpers": true, // 辅助函数是否提取
"regenerator": true, // 同babel-plugin-transform
"useESModules": true // 使用 es modules helpers, 减少 commonJS 语法代码
}
]
]
}
踩坑
1.可选链插件需要升级Babel7才能用。。
2.升级的时候如果项目存在stage-xxx 自动升级会安装一堆该阶段的语法插件
3.usebuiltIns已经不被推荐了,如果使用它需要结合配置core-js
