首页javascript

babel 入门指南

hfpp2012发布于1115 次阅读

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就可以一边开发一边转化代码了。

完结。

参考链接

本站文章均为原创内容,如需转载请注明出处,谢谢。

3 条回复
喜欢
友情提示
   官方 QQ 群 697272886

© Rails365 | 隐私条款 | 服务条款 | 加盟本站 | 粤ICP备15004902号 | 在线学员:32

Top