Babel转码器入门

现在ES6非常火，但是有些特性浏览器还未完全支持，这样如果你写的代码是ES6的话，你就需要一款神器可以帮你将ES6的代码转为ES5，从而在现有的环境中执行。

接下来就跟大家分享如何使用Babel这个神器。

首先，我们需要在我们电脑上安装Node环境，
Node下载，然后像装其他软件一样在你的电脑上安装，
安装成功后，cmd进入命令行窗口，键入

node -v

输入以上结果即证明你安装成功。

执行命令 node init 初始化项目，在该目录下回生成package.json文件
创建一个项目文件夹，如ES6Study，进入ES6Study文件夹，创建一个app文件夹和一个public文件夹，在app文件夹下创建Greeter.js文件

// Greeter.jsmodule.exports = function() {  var greet = document.createElement('div');  greet.textContent = "Hi there and greetings!";  return greet;};

再创建一个main.js文件

//main.js const greeter = require('./Greeter.js');document.querySelector("#root").appendChild(greeter());

在项目的根目录下（在这里为ES6Study文件夹下）创建一个.babelrc文件，这是Babel 的配置文件。使用使用 Babel 的第一步，就是配置这个文件。
（我直接创建这个文件时window提示要输入文件名，我用sublime新建保存就可以了）

该文件用来设置转码规则和插件，在你的.babelrc文件中加入：

{    "presets": [      "latest",      "react",      "stage-2"    ],    "plugins": []  }

presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。

# 最新转码规则$ npm install --save-dev babel-preset-latest# react 转码规则$ npm install --save-dev babel-preset-react# 不同阶段语法提案的转码规则（共有4个阶段），选装一个$ npm install --save-dev babel-preset-stage-0$ npm install --save-dev babel-preset-stage-1$ npm install --save-dev babel-preset-stage-2$ npm install --save-dev babel-preset-stage-3

接下来安装命令行转码工具babel-cli，在命令行中键入：

npm install --global babel-cli

命令行转码用法如下：

# 转码结果输出到标准输出$ babel example.js# 转码结果写入一个文件# --out-file 或 -o 参数指定输出文件$ babel example.js --out-file compiled.js# 或者$ babel example.js -o compiled.js# 整个目录转码# --out-dir 或 -d 参数指定输出目录$ babel src --out-dir lib# 或者$ babel src -d lib# -s 参数生成source map文件$ babel src -d lib -s

注：
上面代码是在全局环境下，进行 Babel 转码。这意味着，如果项目要运行，全局环境必须有 Babel，也就是说项目产生了对环境的依赖。另一方面，这样做也无法支持不同项目使用不同版本的 Babel。

一个解决办法是将babel-cli安装在项目之中。

# 安装$ npm install --save-dev babel-cli

然后，改写package.json

 {     "scripts": {    "build": "babel app/ -d lib"  }, "devDependencies": {    "babel-cli": "^6.26.0"  },  }

npm 允许在package.json文件里面，使用scripts对象定义脚本命令，它的每一个属性，对应一段脚本。比如医生build命令对应的脚本是“babel app/ -d lib”；
“babel app/ -d lib”意思是将app目录下全部文件转码输出到同路径下的lib目录下（没有lib文件夹会自动帮你创建）；当使用npm run build命令时，就相当于执行
“babel app/ -d lib”，你可以自己配置；
devDependencies中的依赖项是开发的时候所需要的依赖项，比如一些进行单元测试之类的包，在生产环境中是不需要的；

我们可以试下Babel的转码了，
在app目录下创建一个example.js

//example.jsinput.map(item => item + 1);  //箭头函数的ES6的特性

保存后命令行执行

npm run build

执行后，你可以看到项目下多了一个lib目录，里面有example.js文件，打开看：

"use strict";input.map(function (item) {  return item + 1;});

已经帮你转成ES5的语法了

以上文章参考阮一峰老师的ECMAScript6，内容非常详尽大家可前往学习！