搭建基于babel的ES6开发环境

babel是一个转码器，能将ES6代码转码成我们现在的浏览器能执行的ES5代码。 使用3步来配置好一个基本的编译环境：

1.安装babel包

和一般的npm包一样，babel在使用之前也需要进行安装，使用全局安装或者本地安装安装都可以。 全局安装方式如下：

npm install --global babel-cli
复制代码

2.配置.babelrc文件

安装完成之后，需要在项目根目录下创建.babelrc文件来来配置转码规则。windows系统无法直接创建.babelrc文件，需要在根目录下打开cmd输入以下命令创建：

type nul>.babelrc
复制代码

创建之后打开.babelrc文件，写入如下配置：

{
  "presets":[
    "es2015"
  ]
}
复制代码

presets参数是指需要转码的规则集合，我们需要将ES6代码转为ES5，所以只需要写入es2015即可。

3.安装转码规则集

配置好.babelrc中的转码规则之后，需要在本地安装规则集。安装方式如下：

npm install --save-dev babel-preset-es2015
复制代码

以上3步安装完成之后，就可以使用babel来尝试对文件进行转码。 在项目根目录中创建main.js文件，写入如下代码：

let a = 1;
let b = 2;
const main=(a,b) => {
	return a+b;
}
复制代码

在根目录下打开cmd输入如下转码命令：

babel main.js -o bundle.js
复制代码

执行之后可以看到根目录下创建了一个bundle.js文件，内容如下表示转码成功。

"use strict";

var a = 1;
var b = 2;
var main = function main(a, b) {
	return a + b;
};
复制代码

除了编译单个文件之外，babel还能将整个目录的文件统一编译

babel app --out-dir dist
//或者
babel app -d dist
复制代码

以上代码能将app目录下的文件转码到dist目录中去。 全局安装方式使用babel，项目对全局环境依赖性强，假如不同项目需要使用不同版本的babel就办不到了。官方更加推荐使用本地安装方式来使用babel，按照下面的的安装方式来在项目中安装babel。

npm install --save-dev babel-cli
复制代码

安装完成之后，就可以在package.json文件中配置babel的使用。

"scripts":{
   "build":"babel app -d dist"
}
复制代码

执行npm run build 就能实现和上面全局方式使用的整个目录转码了。 但是我们在开发的时候，每次文件发生变化就需要重新执行一遍转码命令，实在太繁琐了。 所以我们可以使用以下命令来监控文件的实时变化，一旦文件内容发生改变就自动进行转码(使用-w或者--watch)。

babel app/main.js --watch --out-file dist/main.js
babel app/main.js -w --out-file dist/main.js
复制代码