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编译后的结果