旧项目升级：目标babel6升级babel7

目标babel6升级babel7，让旧项目能使用新特性写法
支持支持JavaScript的可选链操作符（?.）和空值合并操作符（??）

兼容性测试：node版本要求14以上，其他版本运行会报错

node版本可以支持向下兼容，旧版本就运行不了新版本

参考链接：www.jianshu.com/p/02d7d2908…

(1)babel-core卸载掉，从新安装@babel/core

1. cnpm un babel-core // 卸载 不然不同版本的core会发生冲突，构建失败
2. cnpm i -D @babel/core // 重新安装babel7的core
3. cnpm i -D babel-loader@8.1.0 // babel7需要babel-loader8以上的版本，否则报错
4. cnpm i -D @babel/polyfill@^7.10.1,
5. cnpm i -D @babel/runtime@^7.10.2,
6. cnpm i -D @babel/plugin-transform-runtime@^7.10.1,
7. cnpm i -D @babel/preset-env@^7.10.2,
8. cnpm install --save-dev @babel/plugin-proposal-optional-chaining @babel/plugin-proposal-nullish-coalescing-operator 支持新特性操作符

配置开启插件

1. // 安装后，卸载不需要的babel6的相关插件，进行.babelrc 的文件配置
2. // .babelrc 文件示例
3. {
4. "plugins": [
5. "@babel/plugin-proposal-optional-chaining",
6. "@babel/plugin-proposal-nullish-coalescing-operator"
7. ]
8. } 以下是配置文件
   // 安装后，卸载不需要的babel6的相关插件，进行.babelrc 的文件配置
9. {
10. "presets": [
11. [
12. "@babel/env",
13. {
14. "targets": {
15. "edge": "17",
16. "firefox": "60",
17. "chrome": "67",
18. "safari": "11.1"
19. },
20. "corejs": "3",
21. "useBuiltIns": "usage"
22. }
23. ]
24. ],
25. "plugins": [
26. "transform-vue-jsx",
27. "@babel/plugin-transform-runtime",
28. "@babel/plugin-proposal-optional-chaining",
29. "@babel/plugin-proposal-nullish-coalescing-operator"
30. ]
31. }
32. 如果运行报错的话，猜测是babel版本问题，重新执行
33. 1. npm install --save core-js@3
34. 卸载原有node_modules,重新安装依赖。 (这步不能省略)

新语法使用参考链接：developer.mozilla.org/zh-CN/docs/…