babel 入门指南

1.介绍

Babel is a JavaScript compiler.
Use next generation JavaScript, today.

如果你是一个前端开发者，比如开发 react 应用，或者你是一个 nodejs 开发者，可能你听过或用过babel，它是一个转换器。

能把你的 es6 源码或 react 的 jsx 语法源码转成浏览器或 node 能执行的代码。

正如官方所说的:

[1,2,3].map(n => n + 1);

这段代码经过 babel 转化之后变成了下面这样：

[1,2,3].map(function(n) {
  return n + 1;
});

在开发 koa2 应用的时候，它是支持 es7 的 async 和 await 语法的，可是最新版的 node 还不能直接执行这种语法，需要加上 babel 来转换。

下面来探索一下如何使用 babel。

2. babel-cli

首先来安装一下 babel 这个工具。

npm install -g babel-cli

先写一些需要被转换的源码:

// index.js
var send = require('koa-send');
var Koa = require('koa');
var app = new Koa();

// $ GET /package.json
// $ GET /

app.use(async function (ctx, next){
  if ('/' == ctx.path) return ctx.body = 'Try GET /package.json';
  await send(ctx, ctx.path);
})

app.listen(3000);
console.log('listening on port 3000');

其中用到了async这个语法。

接着使用bable命令就可以转换文件了。

babel index.js --out-file main.js

你把main.js文件打开，发现还是跟index.js一样的内容。

上面我们没有用到插件，babel 不知如何去转 async 函数。

在 babel 的官方主页上，有ES2015 and beyond这一部分，你会看到，这个地方已经对 async 函数有支持了。

下面我们安装一下:

npm install --save-dev babel-preset-env

再添加一个.babelrc文件，内容如下:

{
  "presets": ["env"]
}

现在再执行一下babel index.js --out-file main.js会发现就会转换代码了。

可以把这行转换的命令写在package.json文件中：

"scripts": {
    "build": "babel index.js --out-file main.js"
  }

下次就可以直接运行npm run build来执行转换了。

上面使用的是babel-preset-env这个插件，它很全，它能把所有 es6 语法都转化，其实有时候我们不需要那么全的功能，只需要能转化 async 函数即可。

babel-plugin-transform-async-to-generator这个插件就能办到。

npm install --save-dev babel-plugin-transform-async-to-generator

安装完之后，直接在命令行里转化：

babel index.js --out-file main.js --plugins=transform-async-to-generator

babel 官网有好多插件可以使用，详情可以查看https://babeljs.io/docs/plugins/

3. babel-node

我们有时候需要一边开发一边能够用 babel 来转化源码，这个时候可以使用 babel-node 这个工具。

在package.json文件中的scripts部分增加一行

"scripts": {
  "babel-start": "nodemon --exec babel-node index.js"
}

以后运行npm run babel-start就可以一边开发一边转化代码了。

完结。

参考链接

• babel-preset-es2017-node7
• async-to-gen