Babel：JavaScript“编译器”

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很给力吧？

有兴趣深入挖掘的同学

请访问

参考：