babel document
babel's brief introduction, recommendation
babel 7 Simple Upgrade Guide
- When upgrading webpack, we found that we need to upgrade babel. Recently, Babel has a larger update, Babel 7.
- babel simply translates the new syntax of es2015/2016/2017/2046 in JavaScript into es5, enabling low-end runtime environments such as browsers and node s to recognize and execute.
- Strictly speaking, babel can also be translated into lower specifications. But at present, the es5 specification is enough to cover most browsers, so it is a safe and popular way to switch to es5 in general.
-
Contents of this upgrade
- node versions 0.10, 0.12, 4, 5 that no longer support abandoning maintenance
- Use @babel namespaces, 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-loader@6.2.10 requires a peer of webpack@1 || 2 but none was installed
1. Why did you make a mistake?
- Version babel-loader@6.2.10, only for webpack 1 or 2
- Installing a high version and a low version of babel-loader at the same time can also cause errors.
2. Treatment
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. Solutions to webpack/babel errors
1. Why did you make a mistake?
The reason for this error is the version conflict of babel.
It's mostly because your babel dependencies are incompatible with packages.
You can view your dependency list for package.json
That is, version 7.0 of Babel (@babel/core, @babel/preset-react)
You can also command to view the version of bebel-cli (babel-V)
There are also versions of babel 6.0 (babel-core@6.26.0, babel-cli@6.26.0, babel-preset-react@6.24.1)
This error will be reported if you have both version 7.0 and version 6.0 in your package.json dependency package
The two versions are incompatible
2. Treatment
Upgrade all packages related to babel to version 7.0
- Pre-upgrade code
"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", // Newly added "@babel/polyfill": "^7.4.4", "@babel/preset-env": "^7.5.5", "@babel/register": "^7.5.5", "@babel/runtime": "^7.5.5", // Newly added "babel-core": "^7.0.0-bridge.0", // "babel-eslint": "^7.2.3", "babel-loader": "^8.0.0",
3. Modify the. babelrc file as well.
-
The main difference is the upgrade of Babel 7.
- stage-* has been discarded
- Support for import peer es6(es-2015) has been added, so you need to install the plug-in "@babel/plugin-syntax-dynamic-import": "^7.2.0"
- At the same time, support for es-2015 has been directly included in the plug-in @babel/preset-env, and no additional plug-ins need to be installed.
- Notice that commits are deleted and see the document named for the chunk file that implements webpack
- Therefore, the modification of the. babelrc file is mainly to delete the previous content and add the upgraded plug-ins.
- In addition, the phrase ["env", {"modules": false}] is not very clear for the time being.
- Pre-upgrade code
{ "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 section, in the js parsing section, because the es6 code of import() is to be parsed, presets in adding options: ['@babel/preset-env']. @ There is es6 parsing in babel/preset-env.
- @ babel/preset-es2015 official website, which 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: { // Additional Contents presets: ['@babel/preset-env'] }
2.Can't resolve '@babel/runtime/helpers/objectSpread' and '@babel/runtime/helpers/typeof'
1. Why did you make a mistake?
- Upgraded "@babel/plugin-transform-runtime": "^7.5.5".
This plug-in needs to be accompanied by a new plug-in "@babel/runtime": "^7.5.5".
Documents on the official website are also explained.
2. Treatment
npm add @babel/runtime
3.Requires Babel "^7.0.0-0", but was loaded with "6.26.3"
1. Why did you make a mistake?
- The reason for this problem is that some packages do not support the latest "@babel/core": "^7.5.5", but installing a low-level version of babel-core will cause errors, and this bridge version is needed.
- 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 the reason for @babel/plugin-syntax-dynamic-import: "^ 7.2.0" plug-in
2. Treatment
"babel-core": "7.0.0-bridge.0"
Finally, paste in 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" },