刚复工的时候我司业务太多了，我已不记得我们连续作战了多少天，最近算是有时间可以学习学习我的babel大宝贝了，上周末看了下babel的一些核心模块以及babel的一些配置，今天继续以博客的形式记录总结下来。
写前面：babel默认是只会去转义js语法的，不会去转换新的API，比如像Promise、Generator、Symbol这种全局API对象，babel是不会去编译的。在我学会了babe配置l大法之后，看我一会儿怎么把这些新的API给它编译出来就完事儿了。 本文基于babel7.8.0。我主要记录下babel配置需要的一些重要的模块儿包，来一步步进行babel的一个配置解析(以babel.config.js方式配置为例)。 本文主要涉及到的一些babel包：@babel/core，@babel/cli，@babel/plugin*，@babel/preset-env，@babel/polyfill，@babel/runtime，@babel/plugin-transform-runtime。 那，话不多说，发车？@babel/core 这个包里主要都是一些去对代码进行转换的核心方法，具体里面的一些api方法我就不做介绍了；引用官网的一句话：“所有转换将使用本地配置文件”，所以待会儿我们的babel.config.js配置文件就很重要了；再一个core就是核心的意思嘛，所以我们话不多说先把它装起来，gogogo
npm install --save-dev @babel/core这个 @babel/cli就是babel带有的内置cli，可以用来让我们从命令行来编译我们的文件，有了他我们就很方便的对babel进行学习了，那话不多说，先装起来？
npm install --save-dev @babel/cli装完之后你就可以这样来编译你的文件：
npx babel study.js --watch --out-file study-compiled.js简单介绍下上面命令用到的几个参数：--out-file用来把编译后的目标文件输出到对应的文件；如果希望在每次更改目标文件时都进行编译，可以加上 --watch选项；当然还有一些别的选项，不过在我学习babel以及配置的话，这两个选项已经够我用了。
在操作的过程中如果改了babel配置发现编译出来的文件并没有实时编译的情况，需要注意下，如果改了配置文件那就需要重新执行这段命令，要不然babel读不到新的配置。
如果你已经创建了study.js文件并且执行了这段命令，你会发现，对应的study-compiled.js还没发生变化，因为我们还没开始写babel的配置文件，莫慌，马上开始。
babel插件和babel预设是babel配置的两个主要模块，所以我就放在一起说了。
@babel/plugin*首先我们先来说下babel的Plugins，babel官网也说了，人babel是基于插件化的，大概就是说全是插件，所以说我们配置文件里如果什么插件也不配的话，那输入和输出就是一样的，插件插件，你得插上我才让你用。我来编译一个最简单的箭头函数来看下这个babel的插件怎么用，来了，这波我们就需要配置文件了，以下所有的配置都是说的在babel.config.js文件里，相应的插件记得install /* babel.config.js */ module.exports = { presets: [ ], plugins: [ "@babel/plugin-transform-arrow-functions" ] }
然后执行我们上面那段cli的命令，就会得到这种效果：
/* study.js */ const study = () => {} /* study-compiled.js */ const study = function () {};当然，如果我们想要使用es6给数值新增的指数运算符怎么办，只需要添加相应的 @babel/plugin-transform-exponentiation-operator 插件即可：
/* babel.config.js */ module.exports = { presets: [ ], plugins: [ "@babel/plugin-transform-arrow-functions", "@babel/plugin-transform-exponentiation-operator" ] }对应的es6语法就会变成：
/* study.js */ const exponentiation = 2 ** 2 /* study-compiled.js */ const exponentiation = Math.pow(2, 2);从上面的插件化我们就知道需要哪个插件就去引入就完事儿，那么问题来了，es6新增的语法那么多，我总不能一个插件一个插件去添加吧，这样也太麻烦了，这个时候就要用到babel提供的presets了。
presets也就是预设的意思，大概意思就是可以预先设定好一些东西，就省得我们一个个的去引入插件了。官方提供了很多presets，比如preset-env（处理es6+规范语法的插件集合）、preset-stage（一些处理尚在提案阶段的语法的插件集合，当然这种预设的方式在 babel 7+ 版本已经被废弃了）、preset-react（处理react语法的插件集合）等等。