babel原理及使用，polyfill原理及使用，ts-loader和babel处理ts代码的区别以及具体使用

babel简单来说是一种浏览器兼容的工具，它通过把高版本代码变成低版本代码来适配早期低版本浏览器，把一种代码编译成另一种代码，听上去好像编译器，没错，Babel和编译器极其类似。

Babel的运行包括三个阶段

 

1.parse解析阶段，解析分为词法解析，对我们所打的代码进行分词处理，语法解析，将分词处理过后的代码进一步解析为AST抽象语法树，到此解析阶段完成。

2transform转换阶段，Babel本身具转换就是代码的能力，但其他代码，如ts或jsx等则需要其他插件来共同完成转换，通过babel本身和其他插件定义的规则，Babel开始对抽象语法树进行转换，转换成我们需要适配的浏览器能识别的代码。

3generator转换完成后将转换完成后的AST抽象语法树再次转换为代码，打包完毕。

在日常开发中Babel经常需要在webpack中使用，我们需要通过对其进行配置从而更好地使用babel完成日常开发任务，而对其的配置的方法主要有两种，我们可以在webpack中直接配置，或者写在单独的文件中，而在单独的文件又分为两种，分别是babelrc.js以及babel.config.js，那么这两者又有什么区别呢？

webpack内部配置babel：

 单文件配置babel：

 

首先是babelrc.js，在Babel文档中将此文件叫做相对文件配置，当babel编译时会自动检索此文件进行读取，直到读取到package.json，便会停止搜索，这乍一看没什么问题，但如今的项目中具有依赖包，其中包含大量package.json,而生产环境的依赖包也是需要编译的，那么完成这个需求，我们就需要将每个子包都配置一个babelrc.js，这也是为什么他叫相对文件配置，因为它只管自己包内的文件。

而在babel7版本中，发布了babel.config.js文件，他被叫做项目文件配置，babel也有了根目录的概念（也就是项目文件的第一层），Babel编译时会优先在根目录中寻找babel.config.js,它将被应用于整个项目的所有子包，并且会覆盖babelrc.js文件，但问题接踵而至，如果我们要对某个子包进行单独配置，又该怎么做呢？Babel提供了babelrcRoots配置，通过这个配置可以实现，单独配置某一个子包。

通过以上学习，我们了解到了babel转换主要是为了兼容浏览器，但市场是浏览器数量众多，兼容也都不同，如果我们统一设置成低版本代码，兼容问题也许能解决，但高版本代码往往性能更好，所以不能无脑转低，那么我们如何能控制的刚好呢？通过browerlist的文件，就可以做到，你可以通过一些固定语法，写在这个文件中，你想兼容的浏览器，Babel在读取到这个文件后，会通过caniuse的官网比对，确认如何转换代码，达到最优的浏览器兼容转换。我们也可以在babel的预设中通过target属性却设置浏览器兼容，target优先级更高，但通常不使用这个方法。

Babel可以将高版本语法转化为低版本语法，通过转换AST抽象语法树，但是对于一些原型上的方法也就是一些api却无能为力，因为其本质是一个函数，并不是什么新语法，但低版本却不存在这些方法。这是我们则需要polyfill，也就是我们常说的补丁，他会将我们使用到的需要兼容的api方法一起打包，这样便可以在低版本浏览器中使用我们想要的方法。

在Babel7.4.0之前可以使用@babel/polyfill的包，之后则可以通过但如下载引入core-js和regenerator-runtime在使用补丁

corejs指定对应版本，useBuiltIns则指定打包规则，默认false不打包，entry根据手动引入core.js以及regenerator.runtime进行打包，usage根据你的api使用情况打包（打包对应api的原型对象）

对于特定的文件进行打包或者转换代码有很多种方式，可以通过babel中的一些插件，或者直接通过webpack中的一些loader（babel也是一种loader），或者其他方式，较为常见的例子是ts文件，对于ts文件我们既可以使用ts-loader，也可以使用babel中解析ts的插件@babel/preset-typescript ，在这里对其中的细节进行讲解。

 ts-loader转化ts代码不能使用补丁，对于一些高版本api，ts-loader无法进行处理，而babel却可以使用补丁，但babel却无法类型检测（即使使用错误的数据类型，依旧可以打包成功），那么两者之间到底该如何选择呢？答案是一起使用，使用ts-loader进行类型检查，但不打包，而是使用Babel对ts代码进行打包，具体使用时通过ts-loader的npx tsc --noEmit --watch的命令进行类型检测（noEmit是不提交，--watch是一直监听，可以不用一只敲命令），在通过Babel打包即可。

疑问：那么我该如何将ts转化成浏览器兼容的低版本js代码（像browesrelist那样，根据浏览器来转化代码）？