babel工具介绍
babel是一个用于将es6以上版本的代码转换为向后兼容的JS语法的工具，以便代码在当前版本和旧版本浏览器中正常运行。
babel有在线网站和本地运行两种使用方式。
在线对比工具
- （国外网站）bablejs.io
- （国内网站）bablejs.cn
本地下载
在线网站优点是方便快捷，但是如果我们想将整个项目的代码都进行对比的话，在线网站用起来就不是那么舒服啦，这时候我们可以选择本地下载该工具，下面将说明下载及环境搭建的步骤。
条件
- node环境
下载步骤
- 打开命令行，找到你想要做对比的项目文件并进入
- 执行npm init -y，创建一个package.json文件
- 执行npm install @babel/core,下载整个工具最核心的模块，提供核心功能
- 执行npm install @babel/preset-env,这是一个插件的集合，避免了我们为了不同的语法下载不同的插件，具备了将所有es6语法转换为es5的能力
- 执行npm install @babel/cli,主要功能是通过命令行npx将js文件进行编译转换
配置文件
在下载完之后，我们需要像webpack一样，为该工具设置一个配置文件，说明用哪些功能进行文件管理
- 在node_moudules同级下创建配置文件.babelrc，目的是告知在编译某个文件时要使用哪些插件进行编译
- 该文件中是严格的Json，所以一定要是使用双引号
- presets意为预设,接下来还需要其他插件的时候，就可以写在plugin中
{
"presets":[
"@babel/preset-env"
],
"plugin":[
...
]
}
举例
下载并配置完babel相关信息后，我们开始简单使用一下看看是否生效
- 创建一个a.js文件，内容简单写一个es6语法
- 在命令行中执行npx babel a.js -o b.js
- 文件名不要有特殊字符
- 若觉得每次修改后都要执行一次命令行，很麻烦，浪费时间，可以在命令后面增加 --watch，完整的就是npx babel a.js -o b.js --watch，这样就是实时监控编译
- 执行后，刚才写的简易语法就变啦
学习建议
考虑以前的语法哪里有不足，可以如何改进，当你面对新特性为什么会这样的时候，可以看看babel编译后的结果
