你一定碰到过这些库

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 插件怎么搭的更多相关文章

  1. 以Python为例的Async / Await的编程基础

    来源:Redislabs 作者:Loris Cro 翻译:Kevin (公众号:中间件小哥) 近年来,许多编程语言都在努力改进它们的并发原语.Go 语言有 goroutines,Ruby 有 fibe ...

  2. 【转】以Python为例的Async / Await的编程基础

    转, 原文:https://www.cnblogs.com/middleware/p/11996731.html 以Python为例的Async / Await的编程基础 -------------- ...

  3. 图与例解读Async/Await

    JavaScript ES7的async/await语法让异步promise操作起来更方便.如果你需要从多个数据库或者接口按顺序异步获取数据,你可能最终写出一坨纠缠不清的promise与回调.然而使用 ...

  4. How Javascript works (Javascript工作原理) (四) 事件循环及异步编程的出现和 5 种更好的 async/await 编程方式

    个人总结: 1.讲解了JS引擎,webAPI与event loop合作的机制. 2.setTimeout是把事件推送给Web API去处理,当时间到了之后才把setTimeout中的事件推入调用栈. ...

  5. ES6入门十一:Generator生成器、async+await、Promisify

    生成器的基本使用 生成器 + Promise async+await Promise化之Promisify工具方法 一.生成器的基本使用 在介绍生成器的使用之前,可以简单理解生成器实质上生成的就是一个 ...

  6. 附件2:async/await

    在实际开发中总会遇到许多异步的问题,最常见的场景便是接口请求之后一定要等一段时间才能得到结果,如果遇到多个接口前后依赖,那么问题就变得复杂.大家都一直在尝试使用更好的方案来解决这些问题.最开始只能利用 ...

  7. [.NET] 利用 async & await 的异步编程

    利用 async & await 的异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/5922573.html  目录 异步编程的简介 异 ...

  8. ASP.NET 中的 Async/Await 简介

    本文转载自MSDN 作者:Stephen Cleary 原文地址:https://msdn.microsoft.com/en-us/magazine/dn802603.aspx 大多数有关 async ...

  9. 关于异步执行(Async/await)的理解(转发)

    原文地址: http://blog.jobbole.com/85787/ 同步编程与异步编程 通常情况下,我们写的C#代码就是同步的,运行在同一个线程中,从程序的第一行代码到最后一句代码顺序执行.而异 ...

随机推荐

  1. Codeforces Round #549 (Div. 2) 训练实录 (5/6)

    The Doors +0 找出输入的01数列里,0或者1先出完的的下标. Nirvana +3 输入n,求1到n的数字,哪个数逐位相乘的积最大,输出最大积. 思路是按位比较,从低到高,依次把小位换成全 ...

  2. Docker 介绍及基础命令

    Docker 简介 Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linu ...

  3. matplotlib的读书笔记

    matplotlib绘图总结   本文作为学习过程中对matplotlib一些常用知识点的整理,方便查找. 类MATLAB API 最简单的入门是从类 MATLAB API 开始,它被设计成兼容 MA ...

  4. spring AOP的概念和使用

    指路:http://www.cnblogs.com/liujiayun/p/5912628.html AOP的来源:OOP在一些重复代码的使用中,代码冗余比较多,利用AOP可以改善. 通过编写切面和切 ...

  5. 第六周java学习总结

    学号 20175206 <Java程序设计>第六周学习总结 教材学习内容总结 第七章: 主要内容 内部类 匿名类 异常类 断言 重点和难点 重点:内部类和异常类的理解 难点:异常类的使用 ...

  6. ./runInstaller: Permission denied

    一:问题描述 安装oracle过程中出现 二:解决 /usr/local/Oracle11./database/runInstaller /usr/local/Oracle11./database/i ...

  7. python 生产者 --- 消费者

    值得拿出来 看看的 多进程 爬取 (生产) , 解析 (消费) 网页 同时进行,可以作为以后项目扩展使用 from bs4 import BeautifulSoup import requests i ...

  8. python3 练手实例5 做一个简单电子时钟

    import time,sys,os while(1): t = time.strftime('%Y-%m-%d\n%H:%M:%S',time.localtime(time.time())) pri ...

  9. Kafka(二)设计原理

    1.持久性 kafka使用文件存储消息,这就直接决定kafka在性能上严重依赖文件系统的本身特性.且无论任何OS下,对文件系统本身的优化几乎没有可能.因为kafka是对日志进行append操作,因此磁 ...

  10. neo4j语法

    图数据库在社交网络.实时推荐.征信系统.人工智能等领域有广泛应用. 集群特征:主从复制,重选主服务器和容错:每个实例都有自己的本地缓冲 性能优势:查询内不跨网络:实时操作,具有快速和一致的响应时间:缓 ...