Beabel的安装配置和使用Babel 的 CLI 是一种在命令行下使用 Babel 编译文件的简单方法。当然这个不是

babel的安装和配置

Babel 的 CLI 是一种在命令行下使用 Babel 编译文件的简单方法。

全局安装 Babel CLI

当然这个不是必须的，可以作为第一次学习来操作。输入命令等待安装完毕（以管理员模式运行）。

npm install babel-cli -g

在项目内安装Babel CLI

尽管可以把 Babel CLI 全局安装在你的机器上，但是按项目逐个安装在本地会更好。

这样做有两个主要的原因：

同一机器上的不同的项目可以依赖不同版本的 Babel, 这允许你一次更新一个项目。
这意味着在你的工作环境中没有隐含的依赖项。它将使你的项目更方便移植、更易于安装。

第一个项目

输入npm init命令，一路回车，将项目初始化（创建合法的package.json文件，包括名称、版本、作者这些信息等）。
然后在项目babel上安装 Babel CLI，等待安装完成。–save是将babel-cli写进packge.json文件，-dev是将babel-cli写进开发依赖中，而不是生产的依赖
```
npm install --save-dev babel-cli
```
红色箭头所指的代表我们已经成功将 Babel CLI 安装到项目中了。

现在，我们不直接从命令行运行 Babel 了，取而代之我们将把运行命令写在 npm scripts 里，这样可以使用 Babel 的本地版本。

只需将 "scripts" 字段添加到你的 package.json 文件内并且把 babel 命令写成 build 字段。

  {
    "name": "my-project",
    "version": "1.0.0",
+   "scripts": {
+     "build": "babel src -d lib" //项目里已经有script，所以直接负责这一行就可以了。
+   },
    "devDependencies": {
      "babel-cli": "^6.0.0"
    }
  }

添加后的结果：

{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "compiled.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "babel src -d lib" //添加的一行代码
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0"
  }
}

现在可以在终端里运行下面的命令了。
```
npm run build
```
这个时候报错了，提示src doesn't exist，造成这样的问题一是因为babel是局部安装的，运行babel需要指明路径。

可以看到babe的路径是在 ./node_modules/.bin下。-d指的是destination，lib没有的话自动生成。
```
./node_modules/.bin/babel src -d lib
```
还是同样提示src doesn't exist，这里的src指的是目录，改成你需要编译的目录。
```
./node_modules/.bin/babel js -d lib
```
目前为止通过运行 Babel 自己我们并没能“翻译”代码，而仅仅是把代码从一处拷贝到了另一处。

配置 Babel

.babelrc

由于 Babel 是一个可以用各种花样去使用的通用编译器，因此默认情况下它反而什么都不做。你必须明确地告诉 Babel 应该要做什么。

你可以通过安装**插件（plugins）或预设（presets，也就是一组插件）**来指示 Babel 去做什么事情。

在我们告诉 Babel 该做什么之前，我们需要创建一个配置文件。你需要做的就是在项目的根路径下创建 .babelrc 文件。然后输入以下内容作为开始：
```
{
  "presets": [],
  "plugins": []
}
```
这个文件就是用来让 Babel 做你要它做的事情的配置文件。

babel-preset-es2015

我们先从让 Babel 把 ES2015（最新版本的 JavaScript 标准，也叫做 ES6）编译成 ES5（现今在大多数 JavaScript 环境下可用的版本）开始吧。

我们需要安装 "es2015" Babel 预设：
```
npm install --save-dev babel-preset-es2015
```
我们修改 .babelrc 来包含这个预设。
```
{
    "presets": [
+     "es2015" //加入这行代码
    ],
    "plugins": []
}
```
接下来我们再次使用babel编译下代码，成功了有木有？！
```
./node_modules/.bin/babel js -d lib
```
在每次编译的时候，都需要敲那么长的相对路径实在是不能忍受。可以直接使用npx babel替代
```
npx babel js -d lib
```

学习更多的命令

如何监听目录文件的实时变更，实现自动编译。
```
npx babel js -d lib -w
```
正在监听中

自动编译完成

待续。。。。