webpack高级-babel的使用

💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】
文章最后有作者l联系方式（备注进群）

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也拥有编译器的工作流程：

1. 解析阶段（Parsing）
2. 转换阶段（Transformation）
3. 生成阶段（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

1. 配置ts-loader

2. 通过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呢？

1. 使用ts-loader（TypeScript Compiler）

• 直接编译TypeScript，那么只能将ts转换成js；
• 如果我们还希望在这个过程中添加对应的polyfill，那么ts-loader是无能为力的；
• 我们需要借助于babel来完成polyfill的填充功能；

2. 使用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可以实时的检测类型错误；

  

有帮助到各位的帮忙点点赞~