Babel全家桶简介

前言

配置webpack的时候发现一堆babel相关的组件，在此将所查获的资料整理一下，方便之后查阅。

1. babel-cli

babel命令行工具

// 通过命令行转换js代码
$ babel example.js

2. babel-node

用法同node命令，运行时提供es6运行环境

$ babel-node
> (x => x * 2)(1)
2

$ babel-node es6.js
2

3. babel-register

babel-register模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用Babel进行转码。可以说是为了兼容conmonjs的代码。

# 使用时，必须首先加载babel-register
require("babel-register");
require("./index.js");

4. babel-core

如果某些代码需要调用 Babel 的 API 进行转码，就要使用babel-core模块。
就是提供一种方式，可以用编码的方式转换es6代码。

var babel = require('babel-core');

// 字符串转码
babel.transform('code();', options);

5. babel-polyfill

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

举例来说，ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

具体哪些不能转换点击这里

// 使用时要在转换的es6之前引入，为了方便直接在最顶部引入即可
import 'babel-polyfill';
// 或者
require('babel-polyfill');

6. babel-loader

webpack的loader，要注意的是必须同时安装babel-core

7. babel-plugin-transform-runtime

1. 许多常用的垫片函数会在多个文件里面重复出现，启用插件 babel-plugin-transform-runtime 后，Babel 就会使用 babel-runtime 下的工具函数，将这些重复的函数整合。
2. babel-polyfill的许多函数会污染全局作用域，转换器transformer会将这些内置（垫片）设置别名到core-js中（避免全局污染）

假如用了babel-polyfill，最好把这个用上。
使用方法，点击这里《Runtime transform 运行时编译es6》注意：该模块依赖babel-runtime

8. babel-eslint

顾名思义对babel的代码使用eslint。用法参见官方介绍

参考文献

《【JavaScript】深入理解Babel原理及其使用》
《Runtime transform 运行时编译es6》
本文大量引用了阮一峰老师的《ECMAScript 6 入门》的内容，本书详细的介绍了es6，强烈建议阅读。

后记

文章难免疏漏，如有问题，还请大家指正。