webpack4配置之——09：配置babel7

如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里

2019.04.09

此页面有部分扩充内容点击查看

安装 babel 相关插件

npm install babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime -D

项目根目录添加 .babelrc 文件

在 .babelrc 文件中加入以下代码：

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      },
      "useBuiltIns": "usage"
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

同时，需要在 webpack.dev.conf.js 文件中，增加 babel-loader,代码如下：

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            use: ['babel-loader?cacheDirectory=true'],
            include: path.resolve(__dirname, 'src')
        }
    ]
}

至此，babel 相关配置，告一段落

babel个性化配置

新版中 @babel/runtime 只包含了一些 helpers，如果需要 core-js polyfill 浏览器不支持的 API，可以用 transform 提供的选项 {"corejs": 2} 并安装依赖 @babel/runtime-corejs2。

由于本项目配置了"useBuiltIns": "usage"，并且本项目的superSlide又依赖core-js，所以这里需要做一些特定的配置，并需要下载@babel/runtime-corejs2插件。

yarn add @babel/runtime-corejs2 -D

修改.babelrc文件：

{
  // targets, useBuiltIns 等选项用于编译出兼容目标环境的代码
  // 其中 useBuiltIns 如果设为 "usage"
  // Babel 会根据实际代码中使用的 ES6/ES7 代码，以及与你指定的 targets，按需引入对应的 polyfill
  // 而无需在代码中直接引入 import '@babel/polyfill'，避免输出的包过大，同时又可以放心使用各种新语法特性。
    "presets": [
      ["@babel/preset-env", {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        },
        "useBuiltIns": "usage"
      }]
    ],
    "plugins": [
      ["@babel/plugin-transform-runtime",{
        "corejs": 2
      }]
    ]
}

这里需要说明的是：

1. 项目用到了@babel/runtime-corejs2该插件，那么就必须下载core-js插件，而且是项目依赖，这两个插件在终端下载完后，如果直接运行yarn start，那么会出现如下警告：

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it
doesn't, you need to run one of the following commands:

  npm install --save core-js@2    npm install --save core-js@3
  yarn add core-js@2              yarn add core-js@3

此时重启终端命令行，再次运行yarn start 就不会出现这个警告了
出现上述警告是因为.babelrc中缺少配置，这里不仅需要在@babel/plugin-transform-runtime中声明core-js的版本，也需要在@babel/preset-env声明使用core-js:

{
  // targets, useBuiltIns 等选项用于编译出兼容目标环境的代码
  // 其中 useBuiltIns 如果设为 "usage"
  // Babel 会根据实际代码中使用的 ES6/ES7 代码，以及与你指定的 targets，按需引入对应的 polyfill
  // 而无需在代码中直接引入 import '@babel/polyfill'，避免输出的包过大，同时又可以放心使用各种新语法特性。
    "presets": [
      ["@babel/preset-env", {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        },
        "useBuiltIns": "usage",
        "corejs": 2
      }]
    ],
    "plugins": [
      ["@babel/plugin-transform-runtime",{
        "corejs": 2
      }]
    ]
}

此时再次运行yarn start会发现终端就不会再出现上面那种警告了

2. 如果在运行开发环境过程中出现如下错误：

Can't resolve 'core-js/library/fn/object/assign

只要是这种找不到core-js/library，都说明你下载的是3.x版本的core-js，在3.x版本，已经没有library文件，原来的library文件夹下的文件，可以在core-js@3版本的es文件夹下找到，这里报错的原因是babel的插件和core-js的版本对应没有及时更新，所以，我们只能暂时做降级处理，删除3.x版本的core-js，并重新下载[email protected]版本，再次运行yarn start 就不会再出现这种问题了

当我们在.babelrc文件中做了corejs相关配置后，我们上面所下载的那些babel相关插件中就会有关于core-js的代码会起作用了，目前这些插件的版本中所使用过的corejs版本还都是2.x版本，所以配置corejs时，下载插件如下：

yarn add [email protected]
yarn add @babel/runtime-corejs2 -D

如果后期这些babel插件对依赖的core-js版本升级到3.x，那么上面两个插件就可以更新了：

yarn add core-js
yarn add @babel/runtime-corejs3 -D

@babel/runtime-corejs2 和 @babel/runtime-corejs3 是两个插件，不难看出，一个是corejs的2.x版本，一个是3.x版本，升级到3.x版本，就需要把.babelrc文件中对corejs配置的2改为3，这样corejs这一块的配置就不会再出问题了~

项目中已经安装的babel相关的插件也都需要升级到7.4.4版本，否则也还是会报错