共计 4997 个字符，预计需要花费 13 分钟才能阅读完成。
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 的升级，
- 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"
},
正文完
发表至： javascript
2019-09-06
