【前端卡頓的優化思路和方案03】升級babel7注意事項

babel 文檔

babel 文檔

babel的簡單扼要的介紹，推薦

---

babel 7 簡單升級指南

• 升級webpack的時候，發現須要升級babel，最近babel有一個比較大的更新，就是babel7。
• babel 簡單來講把 JavaScript 中 es2015/2016/2017/2046 的新語法轉化爲 es5，讓低端運行環境(如瀏覽器和 node )可以認識並執行。
• 嚴格來講，babel 也能夠轉化爲更低的規範。但以目前狀況來講，es5 規範已經足以覆蓋絕大部分瀏覽器，所以常規來講轉到 es5 是一個安全且流行的作法。

• 本次升級涉及到的內容

  • 再也不支持放棄維護的 node 版本 0.十、0.十二、四、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"
  },