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.