1. babel-upgrade
官方的介绍是这样的
一个工具，可以更新大多数使用babel的依赖关系，配置文件，和JavaScript文件(将来可能会更多)。
字面意思是说 使用babel-upgrade 可以快速的把你的应用从 babel 6 更新到 babel 7
2. 用法
安装环境： nodejs >=8
如果 npm<5.2 使用 npm install npx -g 安装npx 使用 npx 可以让你使用 babel-upgrade 更新 babel 本地不需要下载任何东西
更新方式
# 更新命令
1. npx babel-upgrade --write
# 或者使用全局安装 babel-upgrade
2. npm install babel-upgrade -g
# 更新命令
babel-upgrade --write
安装完执行 npm install
3. 手动修改插件
删除之前的 .babelrc文件，官方为了兼容，已经替换为.babelrc.json或者babel.config.json，我这里使用的是后者查看如下代码有哪里是缺少的，添加上去，有的升级之后是不给你默认安装的
{
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 2
}
],
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
"@babel/plugin-transform-modules-commonjs",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions"
]
}
如果出现如下报错，大概是引入方式不统一，是因为缺少插件 @babel/plugin-transform-modules-commonjs
TypeError: Cannot assign to read only property 'exports' of object '#
执行命令
npm install --save-dev @babel/plugin-transform-modules-commonjs
之后重启项目，开发模式，生产模式都没问题了
注意，升级过程中一定要注意到生产模式和开发模式是否成功，因为有开发模式编译成功，但是生产模式不成功的情况会发生，笔者就因为生产模式不成功踌躇了好久。
4. 更新详情
这里可以当做了解，具体用法还需要查看官方文档 babel
NodeJs >= 8npm/yarn 更新完依赖之后需要 执行 npm install更新 package.json: dependencies and devDependencies 下的字段到最新版更新 babel 相关相同的包到最新版在每个package.json 中开发依赖中添加 @babel/core
{
"devDependencies": {
+ "@babel/core": "^7.0.0",
+ "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+ "@babel/preset-env": "^7.0.0",
+ "babel-loader": "v8.0.0-beta.0"
- "babel-loader": "6.0.0",
- "babel-plugin-transform-object-rest-spread": "6.0.0",
- "babel-preset-env": "^1.0.0",
},
}
mocha 启动方式更新成 @babel/register
{
"name": "mocha-scripts-test",
"scripts": {
- "test": "mocha --compilers js:babel-register --require babel-polyfill test/*Test.js",
+ "test": "mocha --compilers js:@babel/register --require @babel/polyfill test/*Test.js",
}
}
如果有 jest or jest-cli 依赖的话，使用"babel-core": "^7.0.0-bridge-0"
"devDependencies": {
"@babel/core": "^7.0.0",
+ "babel-core": "7.0.0-bridge.0",
"jest": "^22.0.0"
},
"scripts": {
"test": "jest"
}
如果有 babel-node 运行方式的话，添加新的依赖 @babel/node
"devDependencies": {
"@babel/cli": "^7.0.0",
+ "@babel/node": "^7.0.0"
},
"scripts": {
"start": "babel-node a.js"
}
解决所有的 .babelrc 文件
- src/
- example/
- .babelrc // now modifies these too
- test/
- .babelrc // now modifies these too
- `.babelrc`
把配置文件的简写改成全称
{
"presets": [
+ "@babel/preset-env"
- "env"
]
}
package.json babel key
{
"babel": {
"presets": [
+ "@babel/preset-env"
- "env"
]
}
}
解决所有 env
{
"babel": {
"presets": [
"@babel/preset-env"
]
},
"env": {
"development": {
"plugins": [
- "transform-react-jsx-source",
- "babel-plugin-transform-react-jsx-self"
+ "@babel/plugin-transform-react-jsx-source",
+ "@babel/plugin-transform-react-jsx-self",
]
}
}
}
修改 mocha.opts
- --require babel-register
+ --require @babel/register
更改数组中已逗号隔开的 presets/plugins
{
- "presets": "env, react",
+ "presets": ["@babel/preset-env", "@babel/preset-react"],
}
如果读取并添加了 .flowconfig , react 会加上 flow
{
"@babel/preset-react": "^7.0.0",
+ "@babel/preset-flow": "^7.0.0"
}
presets Stage 将会被替换成个体插件
{
- "presets": ["@babel/preset-stage-3"],
+ "presets": [],
+ "plugins": [
+ "@babel/plugin-syntax-dynamic-import",
+ "@babel/plugin-syntax-import-meta",
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-proposal-json-strings"
+ ]
}
{
- "@babel/preset-stage-3": "^7.0.0"
+ "@babel/plugin-proposal-class-properties": "^7.0.0",
+ "@babel/plugin-proposal-json-strings": "^7.0.0",
+ "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+ "@babel/plugin-syntax-import-meta": "^7.0.0"
}