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

复盘本周使用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版本的问题就总结到这里，后续踩到新的坑会继续完善~