💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】 作者联系方式（备注进群）
1. 为什么需要babel
- 事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；
- Babel是一个工具链，主要用于旧浏览器或者缓解中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript； 包括：语法转换、源代码转换、Polyfill实现目标环境缺少的功能等；
2.Babel命令行使用
babel本身可以作为一个独立的工具（和postcss一样），可以不和webpack等构建工具配置来单独使用。
-
如果我们希望在命令行尝试使用babel，需要安装如下库：
-
@babel/core：babel的核心代码，必须安装；
-
@babel/cli：可以让我们在命令行使用babel；
npm install @babel/cli @babel/core
-
-
使用babel来处理我们的源代码：
-
src：是源文件的目录；
-
--out-dir：指定要输出的文件夹dist； Babel命令行使用
npx babel src --out-dir dist
3.Babel中使用插件
-
我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：
npm install @babel/plugin-transform-arrow-functions -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
-
查看转换后的结果：我们会发现 const 并没有转成 var
-
这是因为 plugin-transform-arrow-functions，并没有提供这样的功能；
-
我们需要使用 plugin-transform-block-scoping 来完成这样的功能；
**npm install @babel/plugin-transform-block-scoping -D **
**npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping ,@babel/plugin-transform-arrow-functions**
4.Babel的预设preset
-
如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）
-
安装@babel/preset-env预设：
preset npm install @babel/preset-env -D
-
执行如下命令：
npx babel src --out-dir dist --presets=@babel/preset-env
5.Babel的底层原理
- babel是如何做到将我们的一段代码（ES6、TypeScript、React）转成另外一段代码（ES5）的呢？
- 从一种源代码（原生语言）转换成另一种源代码（目标语言），就是编译器，事实上我们可以将babel看成就是一个编译器。
- Babel编译器的作用就是将我们的源代码，转换成浏览器可以直接识别的另外一段源代码；
- Babel也拥有编译器的工作流程：
- 解析阶段（Parsing）
- 转换阶段（Transformation）
- 生成阶段（Code Generation）
6.babel编译器执行原理
Babel的执行阶段
这只是一个简化版的编译器工具流程，在每个阶段又会有自己具体的工作
7.webpack使用babel-loader
在实际开发中，我们通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中。
安装相关的依赖：
npm install babel-loader @babel/core
我们可以设置一个规则，在加载js文件时，使用我们的babel：
我们必须指定使用的插件才会生效
8.babel-preset
如果我们一个个去安装使用插件，那么需要手动来管理大量的babel插件，我们可以直接给webpack提供一个preset， webpack会根据我们的预设来加载对应的插件列表，并且将其传递给babel。
比如常见的预设有三个：
- env
- react
- TypeScript
安装preset-env：
npm install @babel/preset-env
9.babel转React的jsx
- 我们编写react代码时，react使用的语法是jsx，jsx是可以直接使用babel来转换的。
- 对react jsx代码进行处理需要如下的插件：
- @babel/plugin-syntax-jsx
- @babel/plugin-transform-react-jsx
- @babel/plugin-transform-react-display-name
但是开发中，我们并不需要一个个去安装这些插件，我们依然可以使用preset来配置：
npm install @babel/preset-react -D
.js和.jsx后缀的文件都需要转js
10.webpack编译Typescript
在项目开发中，我们会使用TypeScript来开发，那么TypeScript代码是需要转换成JavaScript代码。 可以通过TypeScript的compiler来转换成JavaScript
npm install typescript -D
另外TypeScript的编译配置信息我们通常会编写一个tsconfig.json文件：
tsc --init
生成配置文件如下：
可以运行 npx tsc来编译自己的ts代码（这是不需要在webpack环境运行）
npx tsc
1.webpack使用ts-loader
我们希望在webpack中使用TypeScript，那么我们可以使用ts-loader来处理ts文件：
npm install ts-loader -D
- 配置ts-loader
- 通过npm run build打包即可
2.webpack使用babel-loader
除了可以使用TypeScript Compiler来编译TypeScript之外，也可以使用Babel,
- Babel是有对TypeScript进行支持；
- 我们可以使用插件： @babel/tranform-typescript；
- 但是更推荐直接使用preset：@babel/preset-typescript；
安装：
npm install @babel/preset-typescript -D
使用：
3.ts-loader和babel-loader选择
那么我们在开发中应该选择ts-loader还是babel-loader呢？
- 使用ts-loader（TypeScript Compiler）
- 直接编译TypeScript，那么只能将ts转换成js；
- 如果我们还希望在这个过程中添加对应的polyfill，那么ts-loader是无能为力的；
- 我们需要借助于babel来完成polyfill的填充功能；
- 使用babel-loader（Babel）
- 来直接编译TypeScript，也可以将ts转换成js，并且可以实现polyfill的功能；
- 但是babel-loader在编译的过程中，不会对类型错误进行检测；
那么在开发中，我们如何可以同时保证两个情况都没有问题呢？
4.编译TypeScript最佳实践
TypeScript官方文档有对其进行说明：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w0k15Ab6-1683620799651)(images/34.png)]
也就是说我们使用Babel来完成代码的转换，使用tsc来进行类型的检查。
但是，如何可以使用tsc来进行类型的检查呢？
-
在这里，我在scripts中添加了两个脚本，用于类型检查；
-
我们执行 npm run type-check可以对ts代码的类型进行检测；
-
我们执行 npm run type-check-watch可以实时的检测类型错误；
有帮助到各位的帮忙点点赞~
