Babel document

Babel document

Brief introduction of Babel, recommended


Babel 7 simple upgrade Guide

  • When upgrading webpack, it is found that Babel needs to be upgraded. Recently, Babel has a relatively large update, which is Babel 7.
  • Babel simply translates the new syntax of es2015 / 2016 / 2017 / 2046 in JavaScript into Es5, so that the low-end running environment (such as browser and node) can recognize and execute it.
  • Strictly speaking, Babel can also be converted into a lower specification. But at present, the specification of Es5 is enough to cover most browsers, so it is a safe and popular practice to switch to Es5.
  • What is involved in this upgrade

    • Node versions 0.10, 0.12, 4, 5 that are no longer supported for maintenance abandonment
    • Use @ Babel namespace, such as @ Babel / core
    • @Babel / preset env replaces preset-es2015, etc
    • @Babel / runtime changes

During the upgrade process, the following problems were encountered:

0.babel[email protected] requires a peer of [email protected] || 2 but none was installed

1. Why to report an error
  • Babel-loader @ 6.2.10 is only for 1 or 2 of webpack
  • If you install a higher version and a lower version of Babel loader at the same time, an error will also be reported
2. Treatment method
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, and the solution to webback error / Babel error

1. Why to report an error

The mistake here is due to the version conflict of Babel.

Mostly because your Babel dependency package is not compatible.

You can view the dependency list of your package.json

That is, Babel 7.0 (@ Babel / core, @ Babel / preset react)

You can also command to view the version of Bebel cli (babel-v)

There are also Babel version 6.0 (babel-core @ 6.26.0, babel-cli @ 6.26.0, babel-preset-react @ 6.24.1)

If you have both Babel version 7.0 and Babel version 6.0 in your package.json dependency package, this error will be reported

The two versions are incompatible

2. Treatment method

Upgrade all Babel related packages to version 7.0

  • Code before upgrade
"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",
  • Upgraded code
"@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", // New
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.5.5",
"@babel/register": "^7.5.5",
"@ Babel / runtime": "^ 7.5.5", // New
"babel-core": "^7.0.0-bridge.0", // 
"babel-eslint": "^7.2.3",
"babel-loader": "^8.0.0",
3. Also modify the. Babelrc file
  • The main difference is the upgrade of Babel 7,

    1. Stage – * deprecated
    2. Support for ES6 (es-2015) such as import has been added, so “@ Babel / plugin syntax dynamic import”: “^ 7.2.0” plug-in needs to be installed
    3. At the same time, support for es-2015 has been directly included in the “@ Babel / preset env” plug-in, so no additional plug-ins need to be installed.
    4. Notice that the commits are deleted. LookThe naming of chunk file for implementing webpackThis document
  • Therefore, for the modification of. Babelrc file, it is mainly to delete the previous content and add the upgraded plug-in.
  • In addition, [“env”, {“modules”: false}] is not understood at present.
  • Code before upgrade
{
  "presets": [
    ["env", {"modules": false}], // deleted code
    "Stage-2" // deleted code
  ],
  "Plugins": ["transform runtime"], // deleted code
  "Comments": false, // deleted code
  "env": {
    "test": {
      "Presets": ["env", "stage-2"], // modified code
      "plugins": [ "istanbul" ]
    }
  }
  • Upgraded code
{
  "presets": [
    "@ Babel / preset env", // upgraded plug-ins
  ],
  "plugins": [
    "@ Babel / plugin transform runtime", // upgraded plug-ins
    "@ Babel / plugin syntax dynamic import" // upgraded plug-ins
  ],
  "env": {
    "test": {
      "Presets": ["env"], // modified code
      "plugins": [ "istanbul" ]
    }
  }
4. Also modify the webpack.base.conf.js file
  • In the loader part, in the JS parsing part, because you want to parse the ES6 code of import(), press: [‘@ Babel / press env’] in the add options. @In Babel / preset Env, there is the content of ES6 parsing.
  • @The official website of Babel / preset-es2015 mentions that the plug-in has been abandoned
...
    test: /\.js$/,
    exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
    Options: {// what's new
      presets: ['@babel/preset-env']
    }

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

1. Why to report an error
  • Upgrade “@ Babel / plugin transform runtime”: “^ 7.5.5”,
    For this plug-in, you need to add a new plug-in “@ Babel / runtime”: “^ 7.5.5”,

Answer link

Official website documents also have instructions

2. Treatment method
npm add @babel/runtime

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

1. Why to report an error
  • The reason for this problem is that some packages do not support the latest “@babel/core”“^ 7.5.5”, but an error will be reported when installing the lower version of Babel core. This bridging version is required.
    • 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.
  • After investigation, it should be“@babel/plugin-syntax-dynamic-import”: “^7.2.0”Plug in reason
2. Treatment method
  • Solutions online links
  • Bridge version official website link
    "babel-core": "7.0.0-bridge.0"

Finally, paste the complete package.json file

"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"
  },