webpack工程化高级课程_深入解析Babel使用.pdf

深入解析Babel-polyfill

王红元coderwhy

目录

1Babel命令行执行

content

2Babel的底层原理

3浏览器兼容性配置

4babel的配置文件

5babel和polyfill

6React和TS解析

coderwhy为什么需要babel？

◼事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：

开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；

所以，学习Babel对于我们理解代码从编写到线上的转变过程直观重要；

了解真相，你才能获得真知的自由！

◼那么，Babel到底是什么呢？

Babel是一个工具链，主要用于旧浏览器或者缓解中将ECMAScript2015+代码转换为向后兼容版本的JavaScript；

包括：语法转换、源代码转换、Polyfill实现目标环境缺少的功能等；

coderwhyBabel命令行使用

◼babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。

◼如果我们希望在命令行尝试使用babel，需要安装如下库：

@babel/core：babel的核心代码，必须安装；

@babel/cli：可以让我们在命令行使用babel；

npminstall@babel/cli@babel/core

◼使用babel来处理我们的源代码：

src：是源文件的目录；

--out-dir：指定要输出的文件夹dist；

npxbabelsrc--out-dirdist

coderwhy插件的使用

◼比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：

npminstall@babel/plugin-transform-arrow-functions-D

npxbabelsrc--out-dirdist--plugins=@babel/plugin-transform-arrow-functions

◼查看转换后的结果：我们会发现const并没有转成var

这是因为plugin-transform-arrow-functions，并没有提供这样的功能；

我们需要使用plugin-transform-block-scoping来完成这样的功能；

npminstall@babel/plugin-transform-block-scoping-D

npxbabelsrc--out-dirdist--plugins=@babel/plugin-transform-block-scoping

,@babel/plugin-transform-arrow-functions

coderwhyBabel的预设preset

◼但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）：

后面我们再具体来讲预设代表的含义；

◼安装@babel/preset-env预设：

npminstall@babel/preset-env-D

◼执行如下命令：

npxbabelsrc--out-dirdist--presets=@babel/preset-env

coderwhyBabel的底层原理

◼