babel是一个可以将es6，7甚至更高的语法转换成低级浏览器或者说所有浏览器执行结果一样的一个工具，那么如果你非常不喜欢老语法或者经常使用一些es6语法本篇文章对你非常有帮助！
首先我们需要先进行安装babel7
npm i -D @babel/cli @babel/core
因为babel的执行需要依赖一个babel/core的包文件，所以我们需要安装两个包，那么呢我是不建议全局安装的因为我们一般是通过webpack和babel的一起结合进行开发的，所以安装成开发依赖即可(i：install的缩写，D：--save-dev的缩写)
那么我们安装好了就可以使用最新npm提供的一个工具npx命令进行执行babel了（npx就是专门针对与安装开发依赖包所做的一个工具，有什么用呢，老版本npm安装开发依赖想要运行命令行指令，需要到node_modules/.bin目录下运行，那么npx后面跟着你要运行的命令名称npx就会自动去本地的node_modules的.bin目录寻找运行的命令是否存在，如果不存在就去全局安装的包去寻找是否有这个命令，如果还是没有就会进行远程下载到缓存区域执行命令）
所以我们使用 npx babel -V 就可以进行查看babel的版本号了
那么楼主的babel版本是7.4.3也证明安装babel成功了，那么我们迅速写一个代码进行测试吧，赶快体验一下babel的神奇能力吧
新建一个文件抒写一些高级语法
那么楼主写的这个文件成功执行了，那么有前段基础的都知道这段代码放在低版本浏览器或者低版本node上铁定报错，然后我们使用babel命令转化一个代码让他能够让低版本浏览器认识
npx babel 01.js -o 01_trans.js
那么我们发现了一个什么情况呢，代码还是一样根本没什么变化，这是为什么呢？
我们其实现在所安装的babel就是一个只有命令行的一个空壳而已，实际上是什么都干不了的，我们还需要为babel添加一些插件让babel工作，如果没有插件babel就只能拿来敲敲命令而已，没什么实际的作用
然后我们需要安装一个 @babel/preset-env的插件这个插件的工作主要就是用来转换高级语法到es5或者以下的语法的，但是支持的高级语法有一定的限制还需要配合其他插件使用，但是我们一般使用这么一个插件也够用了
npm i -S @babel/preset-env
那么安装成功之后就可以用了吗？当然不是了，你安装了但是babel不知道你安装了啊?你得告诉babel让他使用这个插件进行解析js代码啊，那么怎么告诉babel呢，就是通过配置文件了，每一个执行babel的时候babel都会到项目的根目录寻找一个.babelrc的配置文件，那么我们就新建一个这样的配置文件呗！
大致上就是这个样子吧，然后我们在运行一下babel
npx babel 01.js -o 01_trans.js
这时候发现输出的01_trans.js我们看不懂了类似于这样
在看代码
感觉上还是已经转换成功了哈，那么楼主因为系统限制也测试不了IE到底认不认识，但肯定是可以认识的啦，毕竟我都快不认识了，哈哈哈
好了，基本的babel使用就完成了，那么我在介绍几个常用的babel的插件吧
@babel/polyfill
这个包有什么用处呢，我们要知道一点，babel仅仅只能转换高级语法而已，而高级语法新增的一些函数是无能为力的，这是浏览器内核不支持，那么babel也没办法了，而这个包就是用来解决这个问题的
就比如说es6的一些数组新函数 filter foreach reduce等等低级浏览器该不认识还是不认识而这个包就是用来解决这个问题的（个人猜测应该是通过es5语法重写了这些函数，这样大家都认识了）
说的简单点就是各个浏览器支持的js函数都是大同小异，为了让一段js代码在各个浏览器上都输出相同的结果，polyfill就做了浏览器不认识的函数就提供这样的方法让各个浏览器对于js的兼容性处在同一个水准上（代码语法肯定一样，因为babel转成了es5语法）
那么我们怎么使用呢很简单的，先安装
npm i -S @babel/polyfill
安装完成之后直接在转换后的文件（是转换成低价语法的文件）中引用一段代码
require('@babel/polyfill');
那么这个包的工作就完成了
-
@babel/runtime
-
@babel/plugin-transform-runtime
介绍这两个包就要从代码复用来说起
大家可以发现，babel给我们转换的低级语法，比如es6的class声明类在转换之后其实调用的是createClass这个babel自己定义的方法（前面说了的es6的函数，关键字属于浏览器内核的关系，babel也只能通过低级语法定义出一个解决方法，无法直接让浏览器支持最新的语法）我们思考一下，如果我们做项目了，很多文件都需要定义很多的类是不是这个createClass函数会在每个文件都创建一个呢，答案是肯定过的，对于我们来说这样代码就显得非常臃肿了，怎么办呢？就是这两个包了，这两个包可以使一些公共的函数提出来
- @babel/runtime 就是用于提出来公共的包，但是提出来之后，代码并不会自己会引用这些包啊
- @babel/plugin-transform-runtime 所以我们需要这个包来自动引用公共函数
首先安装
npm i --S @babel/runtime @babel/plugin-transform-runtime
然后配置，@babel/runtime不需要配置，由@babel/plugin-transform-runtime引用，所以只需要配置他
最后使用
最后说一说babel怎么与webpack一起工作吧
首先安装loader，webpack
npm i -D babel-loader webpack webpack-cli
然后在webpack配置文件中配置规则
这里一定要注意，配置babel-loader一定要忽略node_modules文件夹不然的话就是babel也会把node_modules下的js文件也给转换，node_modules但文件数就够你转换的了，非常消耗时间和CPU，而且转换成功之后还运行不了，然后我们直接通过webpack进行打包试试
npx webpack
就是这种情况
好了，写了这么多，也只是想说，更多的还是需要自己不断的摸索，学习，那么我们下次再见!
2019年04月19日10:23:50
