vue babel6升级babel7报错问题

vue项目中babel6升级babel7（使用babel-upgrade）

# npx lets you run babel-upgrade without installing it locally 
npx babel-upgrade --write
 
# or install globally and run 
npm install babel-upgrade -g
babel-upgrade --write

报错问题解决方案

1. Can’t resolve ‘babel-polyfill’

package.json配置文件中删除@babel/polyfill,然后再安装babel-polyfill

npm i babel/polyfill -D

2. Cannot find module 'babel-plugin-syntax-jsx'

原因是在babel-plugin-transform-vue-jsx中使用的包是babel-plugin-syntax-jsx，而babel-upgrade将这个包升级成了@babel/plugin-syntax-jsx 解决方案,在package.json这个删除@babel/plugin-syntax-jsx,然后安装babel-plugin-syntax-jsx

npm i babel-plugin-syntax-jsx -D

3. Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘

1. 产生原因：common.js es6混用了import 和module exports 报错
   解决办法：
   ① 找到报错的依赖文件，统一使用ES6写法
   ② 添加插件npm install --save-dev @babel/plugin-transform-modules-commonjs
   ③ babel config 找到你项目的config文件(.barberlc or something else)，添加sourceType: 'unambiguous'
   eg:

  "presets": [
    ...
  ],
  "plugins": [
    "@babel/plugin-transform-modules-commonjs"，
    ...
  ],
  "sourceType": "unambiguous"
}

2. 产生原因：node_modules中的项目出现报错：Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
   解决办法：
   修改node_modules源码：可以使用patch-package打补丁的方式修改node_modules源码,修改后的源码下次安装时还可以使用，并让团队的其他成员也能看到。
   ① 安装patch-package npm install patch-package --save-dev
   ② 修改package.json
   在 package.json 文件中的 scripts 中加入 "postinstall": "patch-package"
   ③ 打补丁 (vue-design 为需要打补丁的依赖包名，eg. axios,dayjs
npx patch-package vue-design
   ④ 生成patch补丁目录
   运行成功后根目录下会多一个patchs补丁目录，打开里面的文件可以看到我们修改的内容。
   ⑤ 测试补丁是否有效
   删除node_modules目录，然后重新运行npm install，安装完成后，查看你修改的node_modules里面的代码是否还在。如果在，就说明补丁生效了。

参考文章

小tips：使用babel-upgrade从babel6升级babel7
Babel踩坑经验
如何修改node_modules源码