文章目录
复盘本周使用 webpack 打包时遇到的几个坑点,记录下来扩展知识点。
Babel 版本问题
1.发现问题:项目不支持 Promise 方法
项目中使用到了 ES6 语法中的 Promise (async|await) 来进行异步的接口调用。在项目运行中发现报错,语法不支持Promise。那此时我想到的就是加一个解析 ES6 的语法的插件不就行了嘛。
2.尝试解决:引入语法转换插件,增加配置文件
经搜索资料(老版本)引入了babel的插件,下载 babel-plugin-transform-runtime
版本号为 6.23.0
,然后在 .babelrc 文件里进行配置
"plugins": [
"transform-runtime"
]
好了,安装好插件并配置信息了,这下我们可以 start 项目继续往下进行了。然而执行 start 后,在运行中报错。报错信息:
Module build failed (from ./node_modules/babel-loader/lib/index.js):
.babelrc: Error while parsing config - JSON5: invalid character
模型构建失败了,看起来 Babel-loader 并不支持这个插件。
3.再次尝试:升版本号,修改配置名称
继续搜索资料,好像看到了一些不一样的内容。首先,下载的是"@babel/plugin-transform-runtime": "^7.3.4"
,在 .babelrc 文件中配置如下代码
"plugins": [
"@babel/plugin-transform-runtime"
]
那么升个版本号,修改 plugins 的名称,就能成了么?按照上述方法配置,并运行项目,发现项目能够正常运行在 dev 环境中。打开页面,调用 promise 的接口请求正常发送了,async 方法生效。
4.记录总结
那么这次的改动算是成功了。当天忙于项目的开发,没有继续深挖为什么升个版本号就能解决问题。趁着周末的时间补了一下,Babel版本之间的二三事。
babel目前主流的两种版本是6.x与7.x。
(1)Babel 插件库 6.x版本的配置
babel-loader为7.x,搭配的是babel 6.x及以下的插件。
示例如下
在 .babelrc 文件中的引入是
"plugins": [
"syntax-dynamic-import",
"transform-class-properties",
"transform-object-rest-spread",
"transform-runtime",
["module-resolver", {
"root": ["./src"]
}],
["import", {
"libraryName": "antd",
"libraryDirectory": "es"
}]
]
(2)Babel 插件库 7.x版本的配置
babel-loader 为 8.x 的,搭配的是 babel7.x 的插件。
我的项目中babel-loader为^8.0.5
,下载了不匹配的 6.x 的插件,配置的规则也不正确,导致了编译运行失败。
正确的示例如下
在babel插件库 7.x中,用了 npm 的私有 scope,全部的包都挂载到了 @babel 下面。所有下载的 babel 插件都被安装到了 node_modules 下的 @babel 文件夹中。
下载 npm 包的时候也需要注意,带@
的需要加引号下载
示例
npm i '@babel/plugin-transform-runtime' -D
在 .babelrc 文件中的配置,示例如下
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-transform-runtime",
"@babel/plugin-proposal-class-properties"
]
好了,关于 babel 版本的问题就总结到这里,后续踩到新的坑会继续完善~