一、前言
上一篇讲到如何配置一个基本的开发环境。本篇将介绍对于项目中 JS 文件的处理。
二、babel-loader
index.js
代码语言：javascript复制// 箭头函数
const add = (a, b) => a b;
// Promise 对象
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(add(1, 2));
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(add(3, 4));
}, 1000);
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(add(5, 6));
}, 1000);
});
Promise.all([promise1, promise2, promise3]).then(values => {
console.log(values); // [3, 7, 11]
});
// 实例方法：Array.prototype.includes()
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
const root = document.getElementById('root');
root.innerHTML = add(1, 3);
复制代码
有一些版本的浏览器对于JS新的语法(例如 ES6 )的支持不好，这时就需要将新的语法转换成 ES5 标准的语法，让浏览器正常识别它们，保证程序的稳定运行。
为了实现这种转换，我们该怎么办呢？用 Babel，它会把新语法转换为旧语法。
1. 依赖安装
安装：
代码语言：javascript复制npm install -D babel-loader @babel/core @babel/preset-env
复制代码
2. Loader 配置
webpack.config.js
代码语言：javascript复制module: {
rules: [
{
test: /.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
复制代码
对于 babel 的配置，我们一般放在 babel.config.json 中，在根目录中新建 babel.config.json。
三、Babel 的配置
1. 一般情况下的 babel 配置
babel.config.json
代码语言：javascript复制{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage", // 按需引入 corejs 中的模块
"corejs": 3, // 核心 js 版本
"targets": "> 0.25%, not dead" // 浏览器支持范围
}]
]
}
复制代码
还需要下载的依赖：
代码语言：javascript复制npm i core-js@3 --save
复制代码
注意： 必须要配置 useBuiltIns，如果不配置，babel 将不会处理 Promise、Map、Set、Symbol 等全局对象；corejs 也要同时配置，2 的版本可以处理全局对象，但实例方法并不处理，所以这里用 3 的版本。
2. 最佳的 babel 配置
如果在写一个库时，最好添加上插件 —— babel/plugin-transform-runtime，配置如下：
代码语言：javascript复制{
"presets": [
["@babel/preset-env", {
"targets": "> 0.25%, not dead"
}]
],
"plugins": [
// 不污染全局，在运行时加载
["@babel/plugin-transform-runtime", {
"corejs": 3
}]
]
}
复制代码
还需要下载的依赖：
代码语言：javascript复制npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs3
复制代码
四、最后的备注
Babel 版本更新后，很多内容已经发生变化，官方文档也是晦涩难读，而中文网上的文章很多都已经过时，好在我看到了一位大佬的文章，这才让我对 @babel/preset-env 和 @babel/plugin-transform-runtime 有了基本的认识。文章 link 放在文末，请自行阅读。
- @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.
关于本文
本系列来自：EricKnight
https://juejin.cn/user/2154698521972423/posts
