世界上最伟大的投资就是投资自己的教育

全场限时 5 折

首页JavaScript
随风 · 练气

babel 入门指南

随风发布于4069 次阅读

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

完结。

参考链接

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

1 条回复
喜欢
统计信息
    学员: 29063
    视频数量: 1973
    文章数量: 489

© 汕尾市求知科技有限公司 | Rails365 Gitlab | Qiuzhi99 Gitlab | 知乎 | b 站 | 搜索

粤公网安备 44152102000088号粤公网安备 44152102000088号 | 粤ICP备19038915号

Top