在项目中，我们更多的，用的是离线编译。在用之前，我们需要先安装 node（装完 node，有个 npm 就够用了），为什么呢？因为它需要在我们的电脑上面去部署一个编译器的环境。
首先，我们需要打开命令行输入： npm init -y
这个命令和 babel 没关系，我们只是需要先创建一个 package.json 文件。
接下来，我们就需要安装几个 babel 的包了
那么这几个包是干嘛的呢？
@babel/core：babel 的核心库。没有它，就没有babel。
@babel/cli：命令行接口。就是说，cli 为我们提供了必要的命令，没有它就执行不了 babel。说白了，就是你虽然有 babel，但你没命令，执行不了。
@babel/preset-env：指导 babel 的编译。
preset 就是预设，预先设置好的一些配置。比方说我有很多需要去调整的参数，比如 function，我想保留成箭头函数 () => {}，不编译成原始的 function () {}，和我能不能用 Array.from，Array.isArray 等等这些问题的配置。
而 env 就是环境预设，它内部自带了一个浏览器的兼容表，它会根据你具体的配置来编译你的 babel。比如，我只要 IE 浏览器的兼容，其他的浏览器不管。
preset-env 是遵循一个 5% 原则。就是一个东西，它的用户占有量，不超过 5%，那就忽略它。也就是说，一些相对人数使用比较少的一些特性，它就不会去管了。当然，这个东西怎么设置，都是看个人的，只是它默认 5%。
接下来，下载完这三个库之后，我们打开 package.json 文件，在 scripts 里面增加一条脚本命令：
那么 "build": "babel src -d dest" 这条命令是什么意思呢？
build：就是等会我们在命令行启动的指令。说白了就是一个快捷键，叫什么都是自己定的。
babel ：意思就是我们需要运行 babel。也就是 babel/cli 提供的命令。
随后，我们需要告诉 babel 两件事：
第一，从哪个目录里面读取源文件来编译。比如我们这里就把 js 文件都放到 src 目录下面。
第二，-d 意思就是我编译完了之后往哪里输出，放到那里去。我们这里设置为 dest 目录。
那么我们来测试一下，在命令行输入指令：npm run build
然后，我们就看到有一个新的目录 dest 被创建了，这里面放的就是 babel 编译之后的文件。
当然 src 里面并没有 js 文件被编译，所以 dest 里面也是空的。接下来，我们就来试试。
我们在 src 下面创建一个使用 ES6 语法的 1.js 文件，并编译：
然后我们就可以看到，dest 目录下面也多了一个 1.js 文件。
但是我们会发现，除了给我们加上了分号之外，并没有其他变化。
那么这是为什么呢？其实就缺一个东西， 预设。
说白了，你需要告诉 babel，什么编译，什么不编译。
因为你不和它说怎么去做，那它自然就保留原样了。
所以我们需要创建一个新的文件：.babelrc
注意，这个文件是没有拓展名的。
.babelrc 文件里面就是一个 json，主要就是有一个东西："presets"。
（preset + s：说明不仅仅是一个预设，而是一堆预设们，所以它的值是一个数组）
这个设置的意思就是说：babel 你别问我什么配置了，你就听 preset-env 环境预设的就行了。
然后我们重新编译下看看：
这时候，我们就可以看到，代码都被编译成 ES5 的严格模式了。
然后我们引入编译后的 js 文件，再重新放到 IE 浏览器中的各个版本中运行，可以看到，都能正常运行。
所以，如果我们使用了在线编译的方式，再想去兼容低版本浏览器，基本就很困难了。
而如果我们用了离线编译的方式呢，因为它本身所依赖的编译环境，是我们电脑上面的开发环境，所以它编译出来的代码，基本就是我们期望能兼容到的版本。
