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 变化
升级的过程中遇到了如下一些问题：
[email protected] requires a peer of webpack@1 || 2 but none was installed
1. 为什么报错
- [email protected]的版本，只是针对于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 版本的 ( [email protected] , [email protected] , [email protected] )
如果在你的 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的升级，
- stage-*已弃用
- 添加了对import等es6(es-2015)的支持，所以需要安装 "@babel/plugin-syntax-dynamic-import": "^7.2.0" 这个插件
- 同时，对es-2015的支持已经被直接包括进了"@babel/preset-env"这个插件，就不需要额外安装其他的插件。
- 注意 删掉了 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/runtime3.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"
},