Babel 是什么
以下是官网解释
Babel是一个js编辑器，是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中
如下作用
- 语法转换
-
通过 Polyfill 方式在目标环境中添加缺失的功能（通过引入第三方 polyfill 模块，例如 core-js）
-
源码转换（codemods
-
更多参考请参照官网
@babel/cli
@babel/cli其实就是一个命令行，可以让我们执行babel运行的命令，推荐安装在项目中，方便项目中对babel版本的控制
@babel/core
babel的核心库，它不会进行任何的转换，比如将箭头函数变更为function函数，转换需要额外添加相应的预设或者插件
@babel/preset-env
@babel/preset-env 它能让你使用最新的 JavaScript 语法而无需操心对目标环境所支持的语法设置相应的语法转换插件（以及可选的 polyfills）。这样能让你的工作更轻松，也能让打出来的 JavaScript 包更小
简而言之就是将最新的js特性转换成es5代码（不包含stage阶段的特性）
官方建议使用 .browserslistrc 文件来指定目标环境
如下
.browserslistrc
> 0.25%
not dead
意思 配置用户活跃度大于25%且还存活的浏览器
如果不是要兼容所有的浏览器，推荐指定目标环境
该预设可以让你不需要配置
也可以配置在
babel.config.json中的targets
{
"presets": [
[
"@babel/preset-env",
{
"targets": "> 0.25%, not dead",
"useBuiltIns": "entry",
"corejs": "3.22"
}
]
]
}
package.json
{ "browserslist": "> 0.25%, not dead" }
默认情况下，@babel/preset-env 将使用 browserslist 配置文件， 除非 设置了 targets 或 ignoreBrowserslistConfig 参数
@babel/polyfill
@babel/preset-env 可以转换大多数高版本都js，但是一些原型链上的函数以及window内置的新增的对象，低版本浏览器本身内核不支持，这就需要用到@babel/polyfill
目前Babel7已经不推荐使用@babel/polyfill
原因如下
打包后的体积过大
造成全局污染，会改变现有对象的原型
可以单独引入core-js与regenerator-runtime两个包，同时结合@babel/preset-env 配置
@babel/preset-env配置中有useBuiltIns和corejs两个属性，如下
{
"presets": [
• [
• "@babel/env",
• {
• "useBuiltIns": "usage",
• "corejs": 3
• }
• ]
]
}
使用该属性将不再额外引入@babel/polyfill，否则会提示如下
When setting useBuiltIns: 'usage', polyfills are automatically imported when needed. Please remove the direct import of @babel/polyfill or use useBuiltIns: 'entry' instead
@babel/plugin-transform-runtime
这是一个开发环境需要的依赖，安装在开发环境Install it as development dependency 下，和@babel/runtime配套使用
主要用于
1 可以减少编译后代码的体积
2构建一个沙盒模式，根据官方解释直接导入core-js或@babel/polyfill及其提供的内置程序，如Promise、Set和Map，这些都会污染全局范围@babel/plugin-transform-runtime会将这些内置程序别名为core-js，这样您就可以无缝地使用它们，而不需要polyfill
@babel/runtime
总结如下
@babel/runtime: 提供各种 helper 函数
@babel/plugin-transform-runtime: 自动引入 helper 函数
预设和插件
插件只对单个功能进行转换，当配置插件比较多时，就可以封装成预设（presets）以此来简化插件的使用，预设简单说就是一组原先设定好的插件，是一组插件的集合
