Webpack5 系列:Babel 的配置

1.前言

本篇将介绍对于项目中 JS 文件的处理。

2.babel-loader

2-1.依赖安装

npm install -D babel-loader @babel/core @babel/preset-env

2-2.Loader 配置

webpack.config.js

module: {
  rules: [
    {
      test: /\.?js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

对于 babel 的配置，我们一般放在 babel.config.json 中，在根目录中新建 babel.config.json。

3.Babel 的配置

3-1.一般情况下的babel配置

babel.config.json

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage", // 按需引入 corejs 中的模块 
      "corejs": 3, // 核心 js 版本
      "targets": "> 0.25%, not dead" // 浏览器支持范围
    }]
  ]
}

还需要下载的依赖：

npm i core-js@3 --save

注意： 必须要配置 useBuiltIns，如果不配置，babel 将不会处理 Promise、Map、Set、Symbol 等全局对象；corejs 也要同时配置，2 的版本可以处理全局对象，但实例方法并不处理，所以这里用 3 的版本。

3-2.最佳的 babel 配置

如果在写一个库时，最好添加上插件 —— babel/plugin-transform-runtime，配置如下：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead"
    }]
  ],
  "plugins": [
    // 不污染全局，在运行时加载
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}

还需要下载的依赖：

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs3

@babel/preset-env just transforms code with syntax, if we don’t config useBuiltIns.
@babel/transform-runtime can provide re-use helpers, but don’t polyfill by default.
Most situation best config: use @babel/preset-env transforms syntax. use @babel/transform-runtime avoid duplicate code, and config corejs: 3 to polyfill.