【前端卡顿的优化思路和方案03】升级babel7注意事项

babel 文档

babel 文档

babel的简单扼要的介绍，推荐

---

babel 7 简单升级指南

• 升级webpack的时候，发现需要升级babel，最近babel有一个比较大的更新，就是babel7。
• babel 简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5，让低端运行环境(如浏览器和 node )能够认识并执行。
• 严格来说，babel 也可以转化为更低的规范。但以目前情况来说，es5 规范已经足以覆盖绝大部分浏览器，因此常规来说转到 es5 是一个安全且流行的做法。

• 本次升级涉及到的内容

  • 不再支持放弃维护的 node 版本 0.10、0.12、4、5
  • 使用 @babel 命名空间，如 @babel/core
  • @babel/preset-env 代替 preset-es2015 等
  • @babel/runtime 变化

升级的过程中遇到了如下一些问题：

0.babel-loader@6.2.10 requires a peer of webpack@1 || 2 but none was installed

1. 为什么报错

• babel-loader@6.2.10的版本，只是针对于webpack的1或2的
• 同时安装一个高本版和一个低版本的babel-loader，也会报错

2. 处理办法

webpack 1.x | babel-loader <= 6.x
webpack 2.x | babel-loader >= 7.x (recommended) (^6.2.10 will also work, but with deprecation warnings)
webpack 3.x | babel-loader >= 7.1”

1.Plugin/Preset files are not allowed to export objects，webpack报错/babel报错的解决方法

1. 为什么报错

这里抱着错误是因为 babel 的版本冲突。

多是因为你的 babel 依赖包不兼容。

可以查看你的 package.json 的依赖列表

即有 babel 7.0 版本的( @babel/core ， @babel/preset-react )

也可命令查看 bebel-cli 的版本 （ babel -V ）

也有 babel 6.0 版本的 ( babel-core@6.26.0 , babel-cli@6.26.0 , babel-preset-react@6.24.1 )

如果在你的 package.json 依赖包中既有 babel 7.0 版本，又有 babel 6.0 版本，就会报这个错误

两个版本是不兼容的

2. 处理办法

将所有有关 babel 的包都升级为 7.0 版本

• 升级前的代码

"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "^1.2.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",

• 升级后的代码

"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.5.5",  // 新增
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.5.5",
"@babel/register": "^7.5.5",
"@babel/runtime": "^7.5.5", // 新增
"babel-core": "^7.0.0-bridge.0", // 
"babel-eslint": "^7.2.3",
"babel-loader": "^8.0.0",

3. 还要修改.babelrc文件

• 主要的区别是，babel7的升级，

  1. stage-*已弃用
  2. 添加了对import等es6(es-2015)的支持，所以需要安装 "@babel/plugin-syntax-dynamic-import": "^7.2.0" 这个插件
  3. 同时，对es-2015的支持已经被直接包括进了"@babel/preset-env"这个插件，就不需要额外安装其他的插件。
  4. 注意 删掉了 commits ，看 实现webpack的chunk文件的命名 这篇文档
• 因此对于 .babelrc文件 的修改，主要就是删去之前的内容，添加升级后的插件。
• 另外，["env", { "modules": false }] 这句暂时不太理解。
• 升级前的代码

{
  "presets": [
    ["env", { "modules": false }],  // 删除的代码
    "stage-2" // 删除的代码
  ],
  "plugins": ["transform-runtime"],  // 删除的代码
  "comments": false,  // 删除的代码
  "env": {
    "test": {
      "presets": ["env", "stage-2"],  // 修改的代码
      "plugins": [ "istanbul" ]
    }
  }

• 升级后的代码

{
  "presets": [
    "@babel/preset-env", // 升级后的插件
  ],
  "plugins": [
    "@babel/plugin-transform-runtime", // 升级后的插件
    "@babel/plugin-syntax-dynamic-import" // 升级后的插件
  ],
  "env": {
    "test": {
      "presets": ["env"],  // 修改的代码
      "plugins": [ "istanbul" ]
    }
  }

4. 还要修改 webpack.base.conf.js 文件

• loader部分，对js解析的部分中，因为要解析 import() 的es6 代码，所以在添加 options 中 presets: ['@babel/preset-env']。@babel/preset-env 之中有对es6解析的内容。
• @babel/preset-es2015 官网，里面提到了已废弃该插件

    ...
    test: /\.js$/,
    exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
    options: { // 新增内容
      presets: ['@babel/preset-env']
    }

2.Can't resolve '@babel/runtime/helpers/objectSpread' and '@babel/runtime/helpers/typeof'

1. 为什么报错

• 升级了 "@babel/plugin-transform-runtime": "^7.5.5",
  这个插件，需要同时再新增加一个插件 "@babel/runtime": "^7.5.5",

解答链接

官网文档也有说明

2. 处理办法

npm add @babel/runtime

3.Requires Babel "^7.0.0-0", but was loaded with "6.26.3"

1. 为什么报错

• 出现这个问题的原因是，有些包还不支持最新的 "@babel/core": "^7.5.5"，但是安装低版本的babel-core又会报错，这时候就需要这个桥接版本。
• • The issue with Babel 7's transition to scopes is that if a package depends on Babel 6, they may want to add support for Babel 7 alongside. Because Babel 7 will be released as @babel/core instead of babel-core, maintainers have no way to do that transition without making a breaking change. e.g.
• 经排查，应该是 "@babel/plugin-syntax-dynamic-import": "^7.2.0" 插件的原因

2. 处理办法

• 解决方案网上链接
• 桥接版本官网链接

    "babel-core": "7.0.0-bridge.0"

最后贴一下完整的 package.json 文件

"devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.5.5",
    "@babel/register": "^7.5.5",
    "@babel/runtime": "^7.5.5",
    "ajv": "^6.10.2",
    "autoprefixer": "^6.7.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^8.0.0",
    "bpmn-js-properties-panel": "^0.32.1",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "es6-promise-polyfill": "1.2.0",
    "eslint": "^3.14.1",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^2.0.7",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-html": "^2.0.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^0.10.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.19.1",
    "less-loader": "4.1.0",
    "mini-css-extract-plugin": "^0.8.0",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.1.0",
    "preload-webpack-plugin": "^2.3.0",
    "rimraf": "^2.6.0",
    "script-loader": "^0.7.2",
    "semver": "^5.3.0",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.5.7",
    "vue-loader": "11.1.4",
    "vue-router": "2.8.0",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "2.5.16",
    "webpack": "^3.8.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-merge": "^2.6.1"
  },