1. 初始化环境
打开cmd（windows）或者终端（Mac，Linux），进入项目文件夹，执行：
// 命令行 输入：
npm init
会得到如下提示语，并开始生成 package.json 文件：
This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. Use
npm install <pkg> --saveafterwards to install a package and save it as a dependency in the package.json file.
翻译：该命令会指引你逐步创建一个 package.json 文件。这个创建过程只包含了那些最常用的条目，并会给出尽可能有意义的默认值。随后你可以使用npm install <pkg> --save命令安装一个 package (包) 并将其保存为 package.json 文件中的 dependencies （生产依赖，对应 devDependencies开发依赖） 条目的一项。
接下来，命令行会指引你一步一步设置 name, version, decription 等等，你可以一路回车下去，因为日后你还可以轻松的通过编辑器在 package.json 文件中对这些条目进行更改。如果你打算这么干，我可以推荐给你一种更便捷的初始化命令：
// 命令行 输入：
npm init -y
这样你就等于告诉了cmd或者终端：我同意你所有的默认值，赶快帮我生成 package.json 文件吧。这跟你执行npm init后一路回车的效果是一样的。
2. 安装 babel-cli 模块，并对 babel 进行环境设置
在cmd或者终端执行（这里我用cnpm代替了npm，如果没有cnpm需要先全局安装和配置cnpm）：
// 命令行 输入：
cnpm install babel-cli --save-dev
这样会在项目文件夹下生成一个node_modules文件夹，并在package.json文件里添加一个devDependencies属性，该属性的值是一个对象，对象里会包含一个babel-cli的属性和对应的类似^6.24.1的属性值。这说明我们已经安装了babel模块。
下面需要对babel进行环境设置，该设置文件名为.babelrc。在项目文件夹下新建一个.babelrc文件，打开该文件，进行如下设置：
// .babelrc 文件内容
{
"presets" : ["es2015"]
}
在命令行内安装 .babelrc 文件内设置的预置项（例如：这里是es2015）：
// 命令行 输入：
cnpm install --save-dev babel-preset-es2015
3. 将 es2015 语法编译为 es5 语法 （单文件）
在项目文件夹下新建一个名为es6.js文件，编写内容为：
// es6.js 文件内容
let num = 10;
在命令行内执行：
// 命令行 输入：
babel es6.js
这时，命令行工具会显示：
// 命令行 生成：
"use strict";
var num = 10;
但是我们需要babel工具帮我们把编译过的文件保存下来，这是我们需要在命令行输入：
// 命令行 输入：
babel es6.js --out-file es5.js
或者使用简写方式：
// 命令行 输入：
babel es6.js -o es5.js
这时，项目文件夹下就会生成一个名为es5.js的文件，文件内容为：
// es5.js 内容：
"use strict";
var num = 10;
4. 将 es2015 语法编译为 es5 语法 （批量）
在项目文件夹下新建一个名为src的文件夹，并在该文件夹下创建index.js文件，同样用es2015的语法编写内容为：
// src 文件夹下的 index.js 文件内容
let num = 10;
在命令行内执行：
// 命令行 输入：
babel src --out-dir build
或者使用简写方式：
// 命令行 输入：
babel src -d build
这时，项目文件夹下就会生成一个名为build的文件夹，该文件夹下有一个名为index.js的文件，文件内容为：
// build 文件夹下的 index.js 文件内容
"use strict";
var num = 10;
5. 设置 babel 自动编译
在开发过程中，我们需要实时编译一个文件，只需在命令行输入：
// 命令行 输入：
babel --watch src --out-dir build
或者使用简写方式：
// 命令行 输入：
babel --watch src --d build
这时，每当我们保存src文件夹下的index.js文件时，babel工具就会执行一次编译，更新build文件夹下的index.js文件并在命令行显示一次：
// 命令行 显示：
src\index.js -> build\index.js
在命令行工具中按下ctrl+c即可终止自动编译功能。
6. 在 package.json 文件中命名具体的命令
我们可以看到，一个babel模块就有很多种命令，虽然有些命令可以简写，但每次手动输入还是比较麻烦。并且，在团队开发中，我们通常不需要把build文件夹和node_modules文件夹上传，我们的同伴就应该能获取到跟我们本地电脑上一样的项目文件。怎么实现呢？答案就是在package.json文件中命名具体的命令，让我们的同伴通过简单的命令达到目的。具体如下：
// package.json 文件中 scripts 属性
"scripts": {
"build": "babel src -d lib"
},
这时，只要有src文件夹和package.json文件，我们只需在命令行内执行：
// 命令行 输入：
npm run build
就能执行将src文件夹中的文件用babel编译并保存至lib文件夹（自动创建）中。
网友评论