1.babel是什么
babel是一个javascript转译器。为什么会有babel存在呢？原因是javascript在不断的发展，但是浏览器的发展速度跟不上。以es6为例，es6中为javascript增加了箭头函数、块级作用域等新的语法和Symbol、Promise等新的数据类型，但是这些语法和数据类型并不能够马上被现在的浏览器全部支持，为了能在现有的浏览器上使用js新的语法和新的数据类型，就需要使用一个转译器，将javascript中新增的特性转为现代浏览器能理解的形式。babel就是做这个方面的转化工作。
2, babel使用
在本地磁盘上创建一个文件夹es6（名字任意），在该文件夹下打开命令行工具，初始化项目。
F:\es6>npm init -y
这个命令目的就是创建一个默认的package.json文件
本地安装babel命令行工具
安装babel的命令行工具的目的是为了在命令行使用babel。
babel命令行工具可以全局安装也可以本地安装，官方文档推荐本地安装，原因有2点；
1.本地安装不同的项目可以使用不同版本的babel，你也可以单独对某个项目的babel进行升级等操作
2.每个项目单独安装的意味着对计算机环境没有依赖，便于移植
在命令行中继续执行如下命令
npm install --save-dev babel-cli
这样就已经在本地安装好babel了。
此时我的package.json文件如下
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
}
}在命令行中调用babel
本地安装的babel是不能够在直接命令行中运行的，为了在命令行中运行babel，我们有两个方法，
是需要配置下package.json文件的scripts项。比如如下代码，配置了一个build命令，运行该命令(npm run build)的时候就会在命令行执行babel src -d lib
{ "name": "es6", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "babel src -d lib" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-cli": "^6.26.0", } }
第2个方法是你需要可以进入node_modules文件夹，再进入.bin文件夹，然后执行在命令行中执行babel src -d lib。
推荐使用npm run build的方法。
这里需要解释babel src -d lib这个命令的意思。这个命令目的是把src文件夹下的文件都转译，转译后的文件放到lib目录下。
ps:此时无论你是运行npm run build 还是运行babel src -d lib命令（其实两个方法本质上都是一样的，都是运行babel src -d lib）命令行都会报错，原因是现在还没有src文件夹。可以先不用管它，稍后我们再新建src文件夹。
创建.babelrc配置文件
在cmd中键入以下命令
type nul>.babelrc
这个时候你的文件夹里就多了一个.babelrc文件了。windows是不能直接创建空文件名的文件的，所以必须通过命令行创建。
安装babel的转译器
这里我们以babel-preset-latest为例。
在命令行中执行如下代码就会安装babel-preset-latest转译器。
# 最新转码规则 npm install --save-dev babel-preset-latest
注意：babel命令行工具（babel-cli）跟babel转译器是两个不同的东西，命令行工具并不具有转译代码的功能，只是为了在命令行中使用babel。要转码必须安装转译器，比如babel-preset-latest转译器或者babel-preset-react转译器。要转译的时候，还要在.babelrc文件或者命令行中配置这些转译器(presets)选项
配置.babelrc文件
.babelrc用于配置除回调以外的所有babel api 选项。例如plugins和presets。plugins用于配置我们转译所需要的插件，presets用于配置我们所需要的转译器。
.babelrc不是必须的，我们在.babelrc中配置的选项都可以通过命令行添加，比如在命令行执行 babel src -d lib --presets=latest等价于在.babelrc中配置 "presets":["latest"]。当然.babelrc要明显方便很多。
babel在转译代码的过程中会自动读取当前目录.babelrc配置文件，如果当前目录没有的话就遍历整个目录树去寻找，直到找到.babelrc文件或者含有"babel"字段的package.json文件，然后使用这些配置选项来转译代码。
1、如果没有.babelrc文件，或者没有在其他文件中设置过babel的presets的配置选型，并且命令行中也没有配置–presets，那么代码是不会转译的。原es6代码什么样，转译后的代码还是什么样。
2、如果你的.babelrc或者你的命令行使用了你没有安装的转译器（presets），代码就会报错
3、但.babelrc中的配置跟你在命令行中使用的配置冲突的时候，以.babelrc中的配置为准
{
"presets":[
"latest"
],
"plugins":[]
}babelrc的替代方案
如果你不想生成.babelrc文件，你可以在你的package.json文件中对babel进行配置。如果你使用gulp或者webpack之类的管理工具的话，也可以在这里工具的配置选项里添加babel的配置选项。
以下以在package.json中配置为例。
{
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "arrow.js",
"scripts": {
"build": "babel src -d lib --comments=true"
},
"babel":{
//babel选项
"presets":["es2015"],
"comments":false
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.2.0"
}
}在package.json中配置babel等同于使用.babelrc文件
编写es6代码
在当前目录分别建设src和lib文件夹
在src下面新建arrow.js文件, 内容如下:
input.map(item => item + 1);
转译es代码
执行命令: npm run build
看lib文件下, 生成了 arrow.js文件, 内容如下:
"use strict";
input.map(function (item) {
return item + 1;
});经过上面的步骤我们已经完成了转译代码的工作
