webpack5 基础配置 （6）深入解析Babel以及在webpack的使用

上一章说到了babel-cli来帮助我们编译文件，但是真实开发中都是通过webapck配置，一次性全部打包完成的。

但我们现在没有配置webpack的基础下来Build一下。

可以看到bundle.js文件中，webpack只是帮我们实现了一个函数作用域，而没有转换es6的代码。
如果想转成es5，就要通过配置了。
babel是一个工具，功能很少，但能通过插件如@babel/preset-env来壮大其功能。如果只有一个babel-loader时，是不能正确转化es5的。必须借助插件。
使用了@babel/preset-env插件预设。预设主要就是根据
找到需要适配的浏览器，然后找到这些浏览器支持的语法，比如有的不支持const，preset-env就会根据这个特点，配置不同的plugin，转换我们的代码。
现在我们改下这个文件

只该适配我们的chrome浏览器试试。
可以看到不会转换，因为谷歌浏览器是支持箭头函数和const。这也验证了@babel/preset-env时通过我们这个文件，来进行适配的，Postcss也是通过这个文件适配的。可建borwserslistrc的重要性。

除了browserslistrc文件来配置preset-env,babel也考虑了可能我们的项目没有这个文件，所以可以通过其他的配置来满足。

可以给preset-env传入一些属性，
在使用后面加上对象，里面放着配置的属性。目前我们是适配chrome，然后
browserslistrc恢复默认，再看看。

可以看到还是es6得写法，证明是webpack,config.js文件得配置生效了。
babel官网位置

建议统一还是在browserslistrts里面配置。

State-X的preset

以前我们可以看到这种配置
es2015就是转换高版本js代码，而react则是转换jsx。
现在一般都是

其中，stage-3已经被整合进去preset-env了，所以可以省略，我们重点了解一下stage-3,看一张图（来自coderwhy老师）

stage-4 完成 ，进入stage-3的提案将包含在下一个ecmascript的修订版中。

这种的含义是使用对应的Babel-preset-stage-x预设，它对应的就是预设包。

抽离代码

我们之前写postcss的时候，是可以分离到另一个文件的。其实Babel也可以。使其可以共享配置信息。比如js, ts文件等都需要babel。
两种写法

他们两个还是有点区别的，
目前很多项目都采用了多包管理，比如babel,element-plus。比如我们安装@babel/子包 就是安装babel包下的一些子包。
babel.config.json可以直接作用于Monorepos（项目管理的方式，一个包里面有多个子包）项目的子包（推荐）
.babelrc.json是早期的配置，处理Monorepos还是挺麻烦的。

再注释掉webapck.config.js文件的配置

打包

可以看到配置生效了。

认识polyfill

在js中，polyfill得意思就是填充物，补丁，垫片等，可以更好地帮助我们使用js。比如我们用了一些语法特性，像Promise,generator,symbool等，如果有些浏览器不认识他们，必定会报错，就可以使用polyfill填充说明或者打一个补丁，让浏览器认识他们。
比如

打包后，虽然Const转成了var，但是Promise没有转化，他是es6得特性，所以当我们浏览器不支持时，就会报错。
profill做了什么呢？
我们可以利用Profill填充上promise这个类，这样浏览器在运行bundl.js文件时，就会找到对应的Promise类，就不会报错。
babel7.4.0之前可以使用@babel/ployfill的包，但是现在已经不推荐了。

会有提醒，说这个已经过期了。
所以我们不是用这个。
按装这两个
cnpm install core-js regenerator-runtime。因为在上面的报错中，他是提示我们不要整个安装Profill，因为Profill已经分包了。所以安装这两个。
这个怎么使用的，我们上面设置的proset-env里面配置，因为我们是想打包后的代码包含我们profill得代码，这样Promise才不会报错。proset-env可以帮我们找到哪些浏览器需要适配，自然profill也是在这里设置。


配置proset-env的时候，在后面加上对象配置属性，useBuiltIns，这里有三个值，作用如图。
使用false的情况下，什么都没改。

第二种

这样写可能会报错，因为有些库已经实现了自己的profill，我们再给他配置新的profill时可能会报错。所以一般，
把他移除掉。然后我们的corejs默认是使用版本2的，所以打包会报错，我们可以



可以看到现在代码已经天花乱坠了。

接着看第三种

这样配置是无效的

因为我们还需要在入口文件下引入

官网提示


可以看到只有在引入后才会正确使用Profill。
这里improt也不是所有代码都会引入，只要是通过browserslistrc文件找到的浏览器需要支持的特性，且Core-js有的都会引入。而usage是根据代码需要来引入的。

认识了解 plugin-transform-runtime

这个主要是来编写工具用的。上面我们的Porfill引入都是引入到全局的，如果是自己的项目没关系，但是如果是我们要编写一个工具库，就会造成当别人引用我们的库的时候，对他们的项目环境造成污染，因为profill目前我们是设置全局的。
所以babel更推荐我们使用@babel/plugin-transfrom-runtime
cnpm install @babel/plugin-transform-runtime --save
cnpm install @babel/runtime-corejs3 --save

大致使用就是这样。

React的jsx支持

在我们编写jsx代码时，也是通过babal来转换的。

转换jsx代码一般需要如上插件。
但是我们开发时候，babel给我们提供了preset-react

报错，提示jsx不能转换。
cnpm install @babel/preset-react -D
安装preset-react，配置

除了使用profille配置，还需要配置preset-react

打包成功


代码正常运行。

能运行jsx代码的原理是，当我们匹配到js文件时，使用Babel-loader处理转换，然后通过babel.config.js文件发现有preset-react这个预设，然后通过preset-react的预设找到jsx转换所需要的各种插件，然后进行转换。

typescript的配置

有两种配置，第一种是全局安装typescript
然后 tsc .\src\index.ts就可以了


报错的原因是因为ts默认不会被当作模块。
解决办法，加上export
就变成独立的模块了。
第二种编译是通过webpack来配置
当我们这样是不行的，因为webpak配置ts文件的时候，需要一个tsconfig.json文件来校验一些ts的配置规则。
输入
tsc --init
可以看到帮我们生成了tsconfig.json文件。

转换成功了。ts的编译还是相对容易。
那如果我们的ts中又有Promsie的时候呢？还需要Profill，因为tsc或者说是ts-loader是没有帮助我们配置这个的。另外，ts-loader的本质也是引用tsc的。