[转] 以 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
转载于:https://www.cnblogs.com/chris-oil/p/10747527.html
[转] 以 async/await 为例,说明 babel 插件怎么搭相关推荐
- 如何使用async / await和Firebase数据库编写漂亮的Node.js API
by Paul Breslin 保罗·布雷斯林(Paul Breslin) 如何使用async / await和Firebase数据库编写漂亮的Node.js API (How to write ...
- 8张图让你一步步看清 async/await 和 promise 的执行顺序
2019独角兽企业重金招聘Python工程师标准>>> **摘要:**面试必问 原文:8张图帮你一步步看清 async/await 和 promise 的执行顺序 作者:ziwei3 ...
- 理解 async/await 的执行
这是一篇简单的短文章,方便理解. 开局先丢官宣:sec-async-function-definitions 这个链接是对 await 的解释,解释了它的执行. await 的执行意味着(官宣巴拉巴拉 ...
- 使用async await 封装 axios
es6 的promise 逐步解决了层层回调的问题,es8的async await让异步变成了同步的写法,在vue中,可以通过封装axios,使得所有的请求都可以使用同步写法,同时处理错误信息等,可以 ...
- JavaScript是如何工作的:事件循环和异步编程的崛起+ 5种使用 async/await 更好地编码方式!...
此篇是 JavaScript是如何工作的第四篇,其它三篇可以看这里: JavaScript是如何工作的:引擎,运行时和调用堆栈的概述! JavaScript是如何工作的:深入V8引擎&编写优化 ...
- async js 返回值_JS异步编程 | Async / Await / Generator 实现原理解析
async/await实现 在多个回调依赖的场景中,尽管Promise通过链式调用取代了回调嵌套,但过多的链式调用可读性仍然不佳,流程控制也不方便,ES7 提出的async 函数,终于让 JS 对于异 ...
- async function_理解 Iterator, Generator 和 Async/Await
戳蓝字「前端技术优选」关注我们哦! 这里重点理解他们三者分别是什么,有什么区别,以及分别适用什么场景 Iterator Iterator是最简单最好理解的,在很久之前我写过一篇文章 循环的秘密 里面讨 ...
- ES2017 异步函数async/await
ES2017标准已于2017年6月份正式定稿了,并广泛支持最新的特性:异步函数.如果你曾经被异步 JavaScript 的逻辑困扰,这么新函数正是为你设计的. 异步函数或多或少会让你编写一些顺序的 J ...
- Javascript中的async await
async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案.目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享asy ...
最新文章
- opencv中Range类的使用
- Android多媒体分析-通过MediaStore获取Audio信息
- php和python对比-PHP和Python性能比较:放弃PHP改用Python
- Python 3.9 beta2 版本发布了,看看这 7 个新的 PEP 都是什么?
- 正式软件工作第一天————MVC、ext JS、和clsa
- Asp.Net微信发布菜单,出现“invalid sub button url domain hint”错误
- Mysql数据库查询当前操作的数据库名
- Java多线程系列(十):源码剖析AQS的实现原理
- 蚂蚁金服开放计算架构:下一代金融级计算架构
- 服务器比虚拟主机安全,虚拟主机比较安全配置
- 【强烈推荐】如何解决JQuery类Post方式的跨域问题 - 空山雪林通用模块设计工作室 - ITeye技术网站...
- 详解LCD1602液晶显示屏的使用
- cacti mysql 压缩 备份_CactiEZ备份和恢复
- UG应用标准库遇到 当前搜索选项查文件失败,部件已卸载
- layui 表格序号累加 翻页序号也累加
- html实现网格布局排版整齐的表格,想要排版布局好看又整齐,用网格排一下就行了吗?...
- android os包含那些,os是什么意思(os的基本类型包括哪三种)
- response Headers字段详解
- Markdown 学习入门
- 简单步骤:Android studio 内容观察者 - 实现数据变化监测