Babel 全家桶

15 年 11 月，Babel 发布了 6.0 版本。相较于前一代 Babel 5，新一代 Babel 更加模块化， 将所有的转码功能以插件的形式分离出去，默认只提供 babel-core。原本只需要装一个 babel ，现在必须按照自己的需求配置，灵活性提高的同时也提高了使用者的学习成本。下面就来讲讲 Babel 全家桶中的各个部分。
### npm i babel

已经弃用，你能下载到的仅仅是一段 console.warn，告诉你 babel 6 不再以大杂烩的形式提供转码功能了。
### npm i babel-core

babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。

> 以下代码转自阮一峰老师博客

``` js
const babel = require('babel-core');

// 字符串转码
babel.transform('console.log', options);
// => { code, map, ast }

// 文件转码（异步）
babel.transformFile('filename.js', options, (err, result) => {
  result; // => { code, map, ast }
});

// 文件转码（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

```
### npm i babel-register

该模块给 require 加了个钩子，`.js`、`jsx`、`.es`、`es6` 后缀的模块都会先转码。此外有几点需要注意：
1. 当前文件不会被转码；
2. 需首先加载 `babel-register`；
3. 由于是实时转码，只适合开发环境。

``` js
require('babel-register')
const index = require('./index.jsx')
```
### npm i babel-cli -g

babel 命令行工具，可以转码文件或目录并输出至指定文件，直接看用法：

``` shell
#1. 直接在终端输出
$ babel script.js
# output...

#2. 输出到文件
$ babel script.js --out-file script-compiled.js

#3. 支持 source maps
$ babel script.js --out-file script-compiled.js --source-maps

#4. watch 变动并输出到文件
$ babel script.js --watch --out-file script-compiled.js

#5. 可以编译文件夹
$ babel src --out-dir lib

#6. 也可以编译成一个文件
$ babel src --out-file script-compiled.js
```
### npm i babel-plugin-*

babel-plugin-\* 代表了一系列的转码插件，如`babel-plugin-transform-es2015-arrow-functions` 用于转码 es6 中的箭头函数，`babel-plugin-transform-async-to-generator` 用于将 es7 中的 async 转成 generator。

在 `.babelrc`中的配置：

``` js
{
  plugins: [
    'transform-es2015-arrow-functions',
    'transform-async-to-generator',
  ]
}
```
### npm i babel-preset-*

我们现在有了 `babel-plugin` 系列，可以按需配置自己想要的特性。但若是想搭个 es6 环境，一个个地配置各个插件，我猜你会疯掉。`babel-preset` 系列就可以满足我们的需求，`babel-preset` 系列打包了一组插件，类似于餐厅的套餐。如 `babel-preset-es2015` 打包了 es6 的特性，`babel-preset-stage-0` 打包处于 strawman 阶段的语法（关于 ECMAScript 制定流程可以看[这里](http://wwsun.github.io/posts/new-in-es2016.html)），

`.babelrc`中可以这样配置：

``` js
{
  presets: [
    'es2015',
    'stage-3',
    'react'
  ]
}
```
### npm i babel-runtime / babel-polyfill

上面提到的插件可以将语法从 es6 转成 es5，但没有提供 api 的转码功能，如 Promise、Set、Map 等新增对象，Object.assign、Object.entries 等全局对象上的新增方法都不会转码。而 `babel-runtime` 和 `babel-polyfill` 就是为此而生。

这两个模块功能几乎相同，就是转码新增 api，模拟 es6 环境，但实现方法完全不同。babel-polyfill 的做法是将全局对象通通污染一遍，比如想在 node 0.10 上用 Promise，调用 babel-polyfill 就会往 global 对象挂上 Promise 对象。对于普通的业务代码没有关系，但如果用在模块上就有问题了，会把模块使用者的环境污染掉。

`babel-runtime` 的做法是自己手动引入 helper 函数，还是上面的例子，`const Promise = require('babel-runtime/core-js/promise')` 就可以引入 Promise。

但 babel-runtime 也有问题，第一，很不方便，第二，在代码中中直接引入 helper 函数，意味着不能共享，造成最终打包出来的文件里有很多重复的 helper 代码。所以，babel 又开发了 `babel-plugin-transform-runtime`，这个模块会将我们的代码重写，如将 Promise 重写成  _Promise（只是打比方），然后引入`_Promise` helper 函数。这样就避免了重复打包代码和手动引入模块的痛苦。此外，`babel-runtime` 不能转码实例方法，比如这样的代码：

``` js
'!!!'.repeat(3);
'hello'.includes('h');
```

这只能通过 `babel-polyfill` 来转码，因为 `babel-polyfill` 是直接在原型链上增加方法。
### babel-polyfill vs babel-runtime

那什么时候用 `babel-polyfill` 什么时候用 `babel-runtime` 呢？如果你不介意污染全局变量（如上面提到的业务代码），放心大胆地用 `babel-polyfill` ；而如果你在写模块，为了避免污染使用者的环境，没的选，只能用 `babel-runtime` + `babel-plugin-transform-runtime`。
### 和 webpack 配合

很少有大型项目仅仅需要 babel，一般都是 babel 配合着 webpack 或 glup 等编译工具一起上的。下面就来介绍下 babel 和 webpack 如何 1 + 1 > 2。

为了显出 babel 的能耐，我们分别配个用 `babel-polyfill` 和 `babel-runtime` 、支持 react 的webpack.config.js

先来配使用 `babel-runtime` 的：

``` js
module: {
  loaders: [{
    loader: 'babel',
    test: /\.jsx?$/,
    include: path.join(__dirname, 'src'),
    query: {
      plugins: ['transform-runtime'],
      presets: [
        'es2015', 
        'stage-0',
        'stage-1',
        'stage-2',
        'stage-3',
        'react',
      ],
    }
  }]
}
```

需要注意的是，`babel-runtime` 虽然没有出现在配置里，但仍然需要安装，因为 `transform-runtime` 依赖它。

再来个 `babel-polyfill` 的：

``` js
entry: [
  'babel-polyfill',
  'src/index.jsx',
],

module: {
  loaders: [{
    loader: 'babel',
    test: /\.jsx?$/,
    include: path.join(__dirname, 'src'),
    query: {
      presets: [
        'es2015', 
        'stage-0',
        'stage-1',
        'stage-2',
        'stage-3',
        'react',
      ],
    }
  }]
}
```

行文仓促，多有疏漏，理解上可能有偏差，欢迎各位搞个大新闻。


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Babel 全家桶 #20

npm i babel

npm i babel-core

npm i babel-register

npm i babel-cli -g

npm i babel-plugin-*

npm i babel-preset-*

npm i babel-runtime / babel-polyfill

babel-polyfill vs babel-runtime

和 webpack 配合

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Participants

Babel 全家桶 #20

Description

npm i babel

npm i babel-core

npm i babel-register

npm i babel-cli -g

npm i babel-plugin-*

npm i babel-preset-*

npm i babel-runtime / babel-polyfill

babel-polyfill vs babel-runtime

和 webpack 配合

Activity

AyumiKai commented on Jul 22, 2016

chunghaochow commented on Feb 6, 2017

wonyun commented on Feb 25, 2017

brunoyang commented on Feb 25, 2017

wonyun commented on Feb 26, 2017

brunoyang commented on Feb 26, 2017

wonyun commented on Feb 26, 2017

lcoder commented on Mar 18, 2017

vcxiaohan commented on Mar 31, 2017

lcoder commented on Mar 31, 2017

wonyun commented on Mar 31, 2017

xiaofan9 commented on Apr 11, 2017

RachelRen commented on May 11, 2017

unclemeric commented on Jun 5, 2017

cunjieliu commented on Jun 20, 2017

bigeyefish commented on Jun 22, 2017

450611 commented on Jul 25, 2017

JoeeeeeWu commented on Jul 26, 2017

JoeeeeeWu commented on Jul 27, 2017

sohucw commented on Aug 11, 2017

rylan0119 commented on Oct 29, 2017

CommanderXL commented on Feb 1, 2018

zhangenming commented on Apr 10, 2018

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Participants

Issue actions