持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
对Babel的理解
来自Babel官方文档的描述
Babel是一个JavaScript编译器 简短的一句话高度概括了
Babel的作用，但也免不了小白读完后的一头雾水
更简单的理解可以把Babel当做一个工具包，里面提供了各种各样的工具帮助我们对JS做兼容性处理，这样就不必担心用了新特性而不被旧版本的浏览器识别
有哪些工具？
在配置Babel时有两个核心配置项：presets与plugins，这也就告诉我们Babel中的工具大致可以分为预设与插件两类，预设其实也是一个插件的集合，它存在的意义是将一系列常用的插件打包到一起，这样就不用写一堆配置项，使代码臃肿
常用presets
@babel/preset-env：包含了当前所有的标准ES语法转换预设，一个预设解决所有语法转换问题@babel/preset-react: 处理react相关语法转换的预设@babel/preset-typescript：处理typescript相关语法转换的预设
常用plugins
@babel/runtime：ES语法转换的辅助函数包，它还有2个升级版@babel/runtime-corejs2与@babel/runtime-corejs3，这两个包除了ES语法转换的辅助函数外，还包含了core-js的API转换函数，分对应core-js2版本与core-js3版本，按需下载其中一个即可@babel/polyfill：用来对ES相关的API进行转译，与@babel/runtime-corejs2功能相近，区别是@babel/polyfill会造成全局变量污染，而@babel/runtime-corejs2不会@babel/plugin-transform-runtime：最为常用，主要有3个作用- 自动按需从
@babel/runtime中引入所需的ES语法转换辅助函数，否则需要手动引入 - 自动按需引入
@babel/runtime-corejs3/core-js-stable/，做无变量污染的core-js3的API补全 - 自动按需引入
@babel/runtime/regenerator，做无变量污染的Generator/async的API补全
- 自动按需从
动手实践一下
下载babel-loader
npm install @babel/core babel-loader
在webpack配置文件中添加babel-loader
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}
]
}
下载所需的babel预设与插件，这里我们采用@babel/preset-env + @babel/runtime-corejs2 + @babel/plugin-transform-runtime的方案，可实现对新语法的按需导入转译，对新API以无变量污染的形式按需导入转译
npm install @babel/preset-env @babel/runtime-corejs2 @babel/plugin-transform-runtime
在package.json文件同级目录下创建Babel配置文件babel.config.js(注：有时会在官方提供的脚手架中看到.babelrc或babelrc.js这样的文件，其实都是Babel的配置文件，选其一即可)并进行配置
module.exports = {
"presets": ["@babel/preset-env"],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 2,
}
]
]
}
在package.json中配置browserslist项指定需要适配的浏览器范围
"browserslist": [
“chrome 38"
]
这里的意思是指定目标环境为Chrome38
接着我们来写一些代码
const addFunction = (a, b) => a+b
let pp = Promise.resolve('ok')
pp.then(console.log)
console.log(addFunction(1,2));
执行代码npm run dev，看一看转换后的结果
可以看到箭头函数已经被转换为普通函数的形式，
let被转换为var，并且Promise API也以无变量污染的方式引入
到这大概完成了对Babel配置入门的介绍，最后给大家再分享一些在学习Babel时看到的很不错的文章和博客
