💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴,请点击【前端学习交流群】 作者联系方式(备注进群)
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可以实时的检测类型错误;
有帮助到各位的帮忙点点赞~