Babel入门

什么是babel？

将高版本的es转换成在浏览器中普适性较好的es版本

这句话也反应了babel的原理，babel分为三步，解析转化和生成

babel如何运行的

解析生成ast树，ast树是一个描述对象

转化通过插件来实行，插件也是babel的核心

插件分为语法插件和转译插件，大部分语法babel都能解决，但是有一些特殊语法babel无法解析，这是需要调用语法插件，如果同时调用转译插件和语法插件，转译插件会生效，他会调用语法插件

除了插件还有一个是预设，他们都被放在了babel的配置文件.babelrc中。

预设可以说是一个插件的集合，它能够根据一定配置信息来选择相应的插件（比如说浏览器版本，node版本），这样就免去了我们手动去选择相应的插件

同时预设和插件在执行顺序上也有差别，预设的执行顺序是从右往左，而插件是从左往右

babel如何使用？

上面讲述的是babel的一些运行机制，而如何使用babel？

1.使用babel-cli
npm安装相应的包，然后在命令行去调用命令就能使用

2.在webpack这类打包工具中使用babel-loader
在webpack中使用需要依赖于babel去对js文件进行转换

babel插件

1.babel-node
babel-cli工具自带一个babel-node命令，提供一个支持ES6的REPL环境。可以将我们的js文件使用这个npm包执行

2.babel-register
在一个js文件里面引入babel-register这个包之后，他都会对require引入的.js、.jsx、.es 和 .es6 后缀名的文件，就会先用 babel 进行转码。这个转换过程是运行时的，也就是不会生成最终的结果，只是在用的时候进行转换

3.babel-core
如果想调用babel相关的api，就需要使用这个包。具体的也没有使用过

4.babel-polyfill
babel对新增的api转换不支持，需要使用的一定的垫片，也就是这个内容要被添加到生成环境中

如果想在webpack中使用babel，可以使用babel-loader，同时基于babel-loader把其他插件作为配置选项加入进去

babel相关问题

看到知乎上的一个问题，

安装babel不就是为了使用es的所有新特性么，为什么还要弄个插件配置来说明我要用哪些新特性？

我按照我认为的一个点进行了转换

为什么不将高版本的内容一股脑的转换为低版本的内容？

如何针对不同平台的支持情况，减少无用特性的编译。 也就是一些新的特性在浏览器的支持程度已经很高了，我们没有必要再去占用资源来进行转换。
这也是为什么现在有了 babel-preset-env，可以自动根据目标平台分析需要用哪些插件。

最后是babel用到知识体现，先遗留下来
1.源码到AST树

2.运行时优化(比如重复代码等): @babel/runtime(包含regenerator-runtime)