1. Babel是啥？能干啥？
Babel是由Node.js承载的前端工具生态中的一员，负责“编译”、“转换”无法在各浏览器中直接运行的JavaScript代码为浏览器可识别的代码，为WEB开发人员提供一个规范、统一的开发平台；
Babel能干啥？
1.1. ES6语法降级：
最新的ECMAScript规范为JavaScript编程带来了极大的便利性（比如：箭头函数、局部作用域、异步模型等），但各浏览器厂商对规范的实现仍然远落后于规范的更新速度；Babel的babel-preset-env支持将ES6语法降级转换为ES5语法，这意味着我们可以使用ES6编写程序，而不用担心现有环境是否支持；
1.2. JSX语法转换：
在React中使用JSX的好处多多（语义清晰、结构直观、抽象了React Element 的创建过程），但JSX语法不能直接被浏览器识别；Babel的babel-preset-react提供了将JSX语法转换为React Element代码的能力，这意味着我们可以充分利用JSX给我们带来的便利；
1.3. Flow注解清除：
Flow就是JavaScript的静态类型检查工具，通过它的注解型语法，可以减少编码中的“类型错误”；同样，Flow的注解语法也无法被浏览器识别，Babel的babel-preset-flow则是主流的用于上线前从源码中剔除Flow语法的工具；
Babel还有很多功能，比如Polyfill、SourceMap等，这里就不细说了，有兴趣可以去官网瞅瞅；
简单来说，用上Babel，再也不用担心
“这个特性能在xx浏览器上用么？”
这种问题了
2. Babel的核心组成
babel-cli：命令行工具，用于JavaScript转码；
注：babel-cli执行时，会以.babelrc文件中的配置为准；
babel-node: 命令行工具，用于执行JavaScript；
注：babel-node是随babel-cli安装的，无需独立安装；
babel-plugin-xxx：babel的功能都由插件实现，例：
## ES6箭头函数转换插件 npm install --save-dev babel-plugin-transform-es2015-arrow-functions ## ES6展开运算符转换插件 npm install --save-dev babel-plugin-transform-es2015-spread
babel-preset-yyy: preset是plugin的集合，例：
## preset-es2015 npm install --save-dev babel-preset-es2015
## preset-es2016 npm install --save-dev babel-preset-es2016
## preset-es2017 npm install --save-dev babel-preset-es2017
## preset-env包含es2015、es2016、es2017 npm install --save-dev babel-preset-env
注：转换ES6代码，只用babel-preset-env就够了；
3. Babel环境搭建
3.1. 安装Node.js
Babel 是 Node.js 前端工具生态中的一员，所以得先装Node.js。
3.2. 安装babel-cli
babel-cli是命令行工具，用于JavaScript转码；
安装babel-cli: npm install --save-dev babel-cli bebel-cl常见用法： ## 转码结果输出到控制台 babel es6.js ## 转码结果写入文件 babel es6.js -o es6_compiled.js ## -s，生成source map文件 babel es6.js -o es6_compiled.js -s
3.3. 安装babel语法转换插件
## ECMAScript转换插件 npm install --save-dev babel-preset-env ## React转换插件 npm install --save-dev babel-preset-react ## Flow转换插件 npm install --save-dev babel-preset-flow
注1：babel-preset-env是babel-preset-es2015、babel-preset-es2016、babel-preset-2017的进化版，只安装一个babel-preset-env就足够了；
注2：babel-preset-env的详细信息可以参考“http://2ality.com/2017/02/babel-preset-env.html”
3.4. 配置 .babelrc
.babelrc是babel的配置文件，放在项目根目录即可；babel命令执行时会按照此文件中的配置进行代码转换；
注：Windows 系统无法直接创建这种命名方式的文件，可以借助IDE工具创建；
3.5. 与Webpack集成
通常Babel不会在项目中单独使用，业界主流做法是将Babel与构建工具Webpack搭配起来，打造完善的“前端工程化体系”；
肿么样？Babel很给力吧？
有兴趣深入挖掘的同学
请访问
参考：
