# babel
## 安装核心库：`npm install @babel/core -D`
## 为什么要用
1. 转换ES6等新语法、解析typescript、解析react、vue等的jsx语法等。
2. Babel是一个工具链，类似于post-css，支持很多基于它的插件。
## 命令行使用
### babel本身是一个独立工具，不一定要和 webpack 一起使用
### 单独使用
1. 安装命令行工具（在webpack中使用不需要安装）：`npm install @babel/cli -D`
2. 命令行命令：`npx babel src/index.js --out-dir result` // src/index.js为处理的文件，如果要处理文件夹里所有文件，这里就传文件夹名：src
3. 此时生成文件并没有进行转换，需要借助babel插件
4. 安装箭头函数转换插件：`npm install @babel/plugin-transform-arrow-functions -D`
5. 命令行命令：`npx babel src/index.js --out-dir result --plugins=@babel/plugin-transform-arrow-functions`
6. 此时，箭头函数就被转换了。
7. 安装块级作用域转换插件：`npm install @babel/plugin-transform-block-scoping -D`
8. 执行命令，多个插件，逗号隔开：`npx babel src/index.js --out-dir result --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping`
9. 此时，const、let、箭头等都被转换了
### @babel/preset-env 使用babel预设，不用上面的方法一个一个转，否则太麻烦
1. 安装：`npm install @babel/preset-env -D`
2. 命令行命令：`npx babel src/index.js --out-dir result --presets=@babel/preset-env`
3. 此时都转换了。
## Babel的底层原理
1. Babel是一种编译器，将一种原生语言（ES6+、TS、JSX），转成另一种原生语言：ES5
2. Babel也有编译器的工作流程：
Ⅰ、解析阶段（Parsing）
Ⅱ、转换阶段（Transformation）
Ⅲ、生成阶段（Code Generation）
## babel 在 webpack.config.js 中的配置
1. 先安装 npm install babel -D、npm install @babel/core -D、 npm install babel-loader -D 以及相关插件
2. webpack中配置：
```
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
// 一个一个加，麻烦
// plugins: [
// '@babel/plugin-transform-arrow-functions',
// '@babel/plugin-transform-block-scoping'
// ]
// 一个顶所有
presets: [
// 传参写法：更多见：https://babeljs.io/docs/en/babel-preset-env
// ['@babel/preset-env', {
// targets: ["chrome 88"] // 参与babel的浏览器，优先级比 .browserslistrc 更高，但不建议写在这
// }]
// 不传参写法
'@babel/preset-env'
]
}
}
}
]
},
```
## babel 配置文件
1. 简化 webpack.config.js 中的配置：
```
{
test: /\.js$/,
use: {
loader: 'babel-loader'
}
}
```
2. 在根目录新建配置文件，文件名可以是：
Ⅰ、babel.config.json(或者.js, .cjs, .mjs)
Ⅱ、.babelrc.json(或者.babelrc, .js, .cjs, .mjs)
两种文件的区别：
Ⅰ、.babelrc.json：早期使用，对于配置Monorepos项目比较麻烦
Ⅱ、babel.config.json：推荐，可以作为 Monorepos 项目的子包
3. 文件内容
如果是JSON文件：
```
{
presets: [
'@babel/preset-env'
]
}
```
如果是js文件：
```
module.exports = {
presets: [
'@babel/preset-env'
]
}
```
# polyfill
## 解释：填充物，补丁，垫片，可以帮助更好的使用JavaScript，比如 promise、generator、symbol、Array.prototype.include的新特性，polyfull可以打补丁，让老浏览器识别
## 如何使用
1. 安装两个包：core-js、regenerator-runtime
```
npm install core-js regenerator-runtime
```
2. 在 babel配置文件中配置：
```
presets: [
['@babel/preset-env', {
// 三个值：
// false：不使用polyfill
// usage：根据源代码需要哪些polyfill就用哪些polyfill、
// entry：手动在入口文件中导入 core-js、regenerator-runtime，根据目标浏览器引入所对应的 polyfill
useBuiltIns: 'usage',
corejs: 3, // 指定 core-js 使用版本，否则会报：We noticed you're using the `useBuiltIns` option without declaring a core-js version.
}]
]
}
```
3. 在webpack.config.js中最好配置exclude，排除node_modules里的代码，不用babel：
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
4. 在入口文件引入下面的插件
```
import 'core-js/stable'
import 'regenerator-runtime/runtime'
```
# Plugin-transform-runtime
## 介绍
在编写工具库，使用polyfill，当别人使用时，工具库通过polyfill添加的特性，可能会污染别人的代码，babel更推荐使用：@babel/plugin-transform-runtime来完成polyfill
## 安装
1. 安装 @babel/runtime：
`npm install @babel/runtime -S`
2. 安装 Plugin-transform-runtime：
`npm install @babel/plugin-transform-runtime -D`
3. 安装 corejs3
`npm install @babel/runtime-corejs3 -S`
## webpack中配置
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
['@babel/plugin-transform-runtime', {
corejs: 3
}]
]
# React的JSX支持
## 安装依赖：
```
npm install @babel/preset-react -D
```
## 配置webpack.config.js
module: {
rules: [
// npm install babel -D、npm install @babel/core -D、 npm install babel-loader -D
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
## 配置babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage',
corejs: 3, // 指定 core-js 使用版本，如果 corejs报错，可能就是版本问题
}],
['@babel/preset-react']
]
}