Babel6升级到Babel7中遇到的问题及处理方式

现在我们直接使用官方推荐的 Babel升级工具 来升级现有项目试试

1. 使用Babel升级工具

# 不安装，直接使用npx来执行
npx babel-upgrade --write

# 或是安裝 babel-upgrade 在 global 並執行
yarn global add babel-upgrade
babel-upgrade --write

至此我们可以看到 package.json 中移除了旧版本的依赖，自动新增了新版名称，.babelrc 文件的配置也会自动修改，但是不会删除已有的插件，比如原来的 transform-decorators-legacy

# 移除旧版本依赖后，重新安装依赖
rm -rf node_modules
yarn install

执行这个命令之后就可以看到报错 Cannot find module babel-plugin-syntax-jsx

2. 处理 Cannot find module babel-plugin-syntax-jsx 异常

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LLczfNHm-1590491400284)(/blog/images/babel6-7/babel-plugin-syntax-jsx-error.png)]

编译失败 ❌

./src/utils/polyfill.js
Thread Loader (Worker 0)
[BABEL] ./src/utils/polyfill.js: Cannot find module 'babel-plugin-syntax-jsx' (While processing: "./node_modules/babel-plugin-tra