Webpack 打包构建时遇到的坑（一）Babel 版本_babel_parser_syntax_error

复盘本周使用 webpack 打包时遇到的几个坑点，记录下来扩展知识点。

Babel 版本问题

1.发现问题：项目不支持 Promise 方法

项目中使用到了 ES6 语法中的 Promise (async|await) 来进行异步的接口调用。在项目运行中发现报错，语法不支持Promise。那此时我想到的就是加一个解析 ES6 的语法的插件不就行了嘛。

2.尝试解决：引入语法转换插件，增加配置文件

经搜索资料（老版本）引入了babel的插件，下载 babel-plugin-transform-runtime 版本号为 6.23.0,然后在 .babelrc 文件里进行配置

     "plugins": [
       "transform-runtime"
     ]
1
2
3

好了，安装好插件并配置信息了，这下我们可以 start 项目继续往下进行了。然而执行 start 后，在运行中报错。报错信息：

Module build failed (from ./node_modules/babel-loader/lib/index.js):
 .babelrc: Error while parsing config - JSON5: invalid character 
1
2

模型构建失败了，看起来 Babel-loader 并不支持这个插件。

3.再次尝试：升版本号，修改配置名称

继续搜索资料，好像看到了一些不一样的内容。首先，下载的是"@babel/plugin-transform-runtime": "^7.3.4",在 .babelrc 文件中配置如下代码

"plugins": [
      "@babel/plugin-transform-runtime"
     ]
1
2
3

那么升个版本号，修改 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"
    }]
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13

（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
1

在 .babelrc 文件中的配置，示例如下

"plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties"
  ]
1
2
3
4
5

好了，关于 babel 版本的问题就总结到这里，后续踩到新的坑会继续完善~