[转] 以 async/await 为例,说明 babel 插件怎么搭
你一定碰到过这些库
babel-polyfill
项目地址:https://github.com/babel/babel/blob/master/packages/babel-polyfill
通过两个依赖实现功能
core-js/shim
提供 ES5/6/7 标准方法的实现regenerate-runtime
提供 async 语法编译后的的运行时环境(下文会专门说明)
babel-plugin-transform-runtime
项目地址:https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime
开发 ES6/7 新特性的库推荐使用该插件,需要注意的是,安装时,必须同时安装 babel-runtime
作为依赖:
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime // `babel-plugin-transform-runtime` 插件本身其实是依赖于 `babel-runtime` 的,但为了适应 `npm install --production` 强烈建议添加该依赖。
插件会将 es6/7 的语法转化为 es5 兼容的格式,并提供运行时依赖。什么是运行时依赖?比如你要用 Array.from 方法,该方法的具体实现必须在代码的执行环境中提供,这就是运行时依赖。
该插件在转化语法时,不会污染全局环境。而 babel-polyfill
则会污染全局环境。
babel-plugin-external-helpers
项目地址:https://github.com/babel/babel/blob/master/packages/babel-plugin-external-helpers/
代码很少,只依赖于 babel-runtime
。相比较 babel-plugin-transform-runtime
会在每个模块注入运行时代码,该插件会将运行时代码打包,类似封装到一个对象下,这样避免注入重复的代码。
让 async/await 跑起来
通过最简单的一个函数:
async function foo() {
return await 1
}
foo().then(function(val) {
console.log(val) // should output 1
})
说明这些 babel 插件怎么搭配,三种方案:
方案一:regenerator
.babelrc 如下配置:
{
"plugins": ["transform-runtime", "babel-plugin-transform-regenerator", "babel-plugin-transform-es2015-modules-commonjs"]
}
- babel-plugin-transform-regenerator 将
async/await
语法转化成 regenerator 库支持的语法 - transform-runtime 将运行时注入,类似:
import regenerator from 'babel-runtime/regenerator'
- babel-plugin-transform-es2015-modules-commonjs 只是为了将 import 转化为 require,便于在 node.js 模块下执行(如果你的执行环境支持 es6 的模块机制,则不需要该插件)。
方案二:generator
这种方式,最适合 node.js 环境,node.js 最早从 0.11 开始,便支持 generator。.babelrc 如下配置:
{
"plugins": ["babel-plugin-transform-async-to-generator"]
}
生成的代码,在 node.js 环境下可以直接执行,此时便不再需要 babel 提供任何有关 generator 相关的运行时环境了,直接 node.js 自带~
方案三:babel-polyfill
.babelrc 如下配置:
{
"plugins": ["babel-plugin-transform-regenerator"]
}
其实和前面 regenerate
一样,去掉了 runtime
配置。编译结束后,需要手动在结果文件的第一行加入:
require('babel-polyfill')
通过 babel-polyfill
向全局注入运行时依赖。那什么时候该用 babel-polyfill
什么时候用 babel-runtime
?官网给出了解释:
This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool.
- 如果是应用级别的开发,可以考虑使用
babel-polyfill
:大而全,支持所有的 es2015+ 特性。可以在项目入口处统一添加,也可以通过打包工具配置入口。 - 如果是开发一个库,使用
babel-runtime
,不会污染全局,而且是根据情况注入需要的运行时环境。
关于 babel-runtime 更多细节,强烈建议阅读官方文档:https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime/README.md
别忘了 externel-helpers
刚刚只是一个简单的 foo 函数,一个文件。多个文件时,存在每个文件都注入类似 asyncToGenerator
等辅助方法,导致重复。举例说明:
foo.js
'use strict'
const bar = require('./bar')
async function foo () {
const val = await bar()
console.log(val)
}
foo()
bar.js
'use strict'
module.exports = async function bar () {
return await 'bar'
}
采用前文提到的 generator
方式,去编译,会发现结果文件中,都有 _asyncToGenerator
定义。修改 .babelrc 如下:
{
"plugins": ["babel-plugin-transform-async-to-generator", "babel-plugin-external-helpers"]
}
再编译,_asyncToGenerator
都变成了 babelHelpers.asyncToGenerator
。这样,多个模块之间没有重复的代码注入,更加干净清爽。不过此时 babelHelpers
是未定义,仍然需要引入运行时环境: transform-runtime
,最终可以运行的配置如下:
{
"plugins": [
"babel-plugin-transform-async-to-generator",
"babel-plugin-external-helpers",
"transform-runtime",
"babel-plugin-transform-es2015-modules-commonjs"
]
}
示例代码见:https://github.com/sabakugaara/babel-example
本文整理自:https://github.com/sabakugaara/sabakugaara.github.io/issues/8
[转] 以 async/await 为例,说明 babel 插件怎么搭的更多相关文章
- 以Python为例的Async / Await的编程基础
来源:Redislabs 作者:Loris Cro 翻译:Kevin (公众号:中间件小哥) 近年来,许多编程语言都在努力改进它们的并发原语.Go 语言有 goroutines,Ruby 有 fibe ...
- 【转】以Python为例的Async / Await的编程基础
转, 原文:https://www.cnblogs.com/middleware/p/11996731.html 以Python为例的Async / Await的编程基础 -------------- ...
- 图与例解读Async/Await
JavaScript ES7的async/await语法让异步promise操作起来更方便.如果你需要从多个数据库或者接口按顺序异步获取数据,你可能最终写出一坨纠缠不清的promise与回调.然而使用 ...
- How Javascript works (Javascript工作原理) (四) 事件循环及异步编程的出现和 5 种更好的 async/await 编程方式
个人总结: 1.讲解了JS引擎,webAPI与event loop合作的机制. 2.setTimeout是把事件推送给Web API去处理,当时间到了之后才把setTimeout中的事件推入调用栈. ...
- ES6入门十一:Generator生成器、async+await、Promisify
生成器的基本使用 生成器 + Promise async+await Promise化之Promisify工具方法 一.生成器的基本使用 在介绍生成器的使用之前,可以简单理解生成器实质上生成的就是一个 ...
- 附件2:async/await
在实际开发中总会遇到许多异步的问题,最常见的场景便是接口请求之后一定要等一段时间才能得到结果,如果遇到多个接口前后依赖,那么问题就变得复杂.大家都一直在尝试使用更好的方案来解决这些问题.最开始只能利用 ...
- [.NET] 利用 async & await 的异步编程
利用 async & await 的异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/5922573.html 目录 异步编程的简介 异 ...
- ASP.NET 中的 Async/Await 简介
本文转载自MSDN 作者:Stephen Cleary 原文地址:https://msdn.microsoft.com/en-us/magazine/dn802603.aspx 大多数有关 async ...
- 关于异步执行(Async/await)的理解(转发)
原文地址: http://blog.jobbole.com/85787/ 同步编程与异步编程 通常情况下,我们写的C#代码就是同步的,运行在同一个线程中,从程序的第一行代码到最后一句代码顺序执行.而异 ...
随机推荐
- Codeforces Round #549 (Div. 2) 训练实录 (5/6)
The Doors +0 找出输入的01数列里,0或者1先出完的的下标. Nirvana +3 输入n,求1到n的数字,哪个数逐位相乘的积最大,输出最大积. 思路是按位比较,从低到高,依次把小位换成全 ...
- Docker 介绍及基础命令
Docker 简介 Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linu ...
- matplotlib的读书笔记
matplotlib绘图总结 本文作为学习过程中对matplotlib一些常用知识点的整理,方便查找. 类MATLAB API 最简单的入门是从类 MATLAB API 开始,它被设计成兼容 MA ...
- spring AOP的概念和使用
指路:http://www.cnblogs.com/liujiayun/p/5912628.html AOP的来源:OOP在一些重复代码的使用中,代码冗余比较多,利用AOP可以改善. 通过编写切面和切 ...
- 第六周java学习总结
学号 20175206 <Java程序设计>第六周学习总结 教材学习内容总结 第七章: 主要内容 内部类 匿名类 异常类 断言 重点和难点 重点:内部类和异常类的理解 难点:异常类的使用 ...
- ./runInstaller: Permission denied
一:问题描述 安装oracle过程中出现 二:解决 /usr/local/Oracle11./database/runInstaller /usr/local/Oracle11./database/i ...
- python 生产者 --- 消费者
值得拿出来 看看的 多进程 爬取 (生产) , 解析 (消费) 网页 同时进行,可以作为以后项目扩展使用 from bs4 import BeautifulSoup import requests i ...
- python3 练手实例5 做一个简单电子时钟
import time,sys,os while(1): t = time.strftime('%Y-%m-%d\n%H:%M:%S',time.localtime(time.time())) pri ...
- Kafka(二)设计原理
1.持久性 kafka使用文件存储消息,这就直接决定kafka在性能上严重依赖文件系统的本身特性.且无论任何OS下,对文件系统本身的优化几乎没有可能.因为kafka是对日志进行append操作,因此磁 ...
- neo4j语法
图数据库在社交网络.实时推荐.征信系统.人工智能等领域有广泛应用. 集群特征:主从复制,重选主服务器和容错:每个实例都有自己的本地缓冲 性能优势:查询内不跨网络:实时操作,具有快速和一致的响应时间:缓 ...