Gulp打包支持Await/Async语法
本文转载自微信公众号「前端学苑」,作者前端小贾。转载本文请联系前端学苑公众号。
简短的概括:
1使用 ES7 的 async/await 时报错
在项目中,最近需要对node代码进行混淆编译,原来曾经解决过ES6打包混淆的问题,在使用的是gulp打包,为了提升代码质量还有异步操作顺序问题,使用了async/await语法,原来的gulpfile混淆又出问题了。
出现问题:
打包完后浏览器报错gulp
- Uncaught ReferenceError: regeneratorRuntime is not defined
对 babel polyfill 的一些理解
一、babel 和 babel ployfill 的关系
1、先来理解下 babel 到底是做什么的?
简单来讲,babel解决语法层面的问题。用于将ES6+的高级语法转为ES5。
2、babel polyfill 又是做什么的?
如果要解决API层面的问题,需要使用垫片。比如常见的有babel-polyfill、babel-runtime 和 babel-plugin-transform-runtime。
理清了他们之间的关系,那么再正式来讲讲有关polyfill的二三事。
二、polyfill 种类
babel polyfill 有三种
- * babel-polyfill
- * babel-runtime
- * babel-plugin-transform-runtime
1babel-polyfill
babel-polyfill通过向全局对象和内置对象的prototype上添加方法来实现的。所以这会造成全局空间污染。
babel-polyfill使用的两种方式
1) webpack.config.js 中:
配置webpack.config.js里的entry设置为entry: ['babel-polyfill',path.join(__dirname, 'index.js')]
2) 业务 js 中:
在webpack.config.js配置的主入口index.js文件的最顶层键入
- import 'babel-polyfill'
两者打印出来的大小都是一样的,打包后大小是280KB,如果没有使用babel-polyfill,大小是3.43kb。两则相差大概81.6倍。原因是webpack把babel-polyfill整体全部都打包进去了。而babel-polyfill肯定也实现了所有ES6新API,文件一定不会小。
那么有没有一种办法,根据实际代码中用到的ES6新增API ,来使用对应的垫片,而不是全部加载进去呢?
是的,有的。那就是 babel-runtime & babel-plugin-transform-runtime,他们可以实现按需加载。
2babel-runtime
简单说 babel-runtime 更像是一种按需加载的实现,比如你哪里需要使用 Promise,只要在这个文件头部
- import Promise from 'babel-runtime/core-js/promise'
不过如果你许多文件都要使用 Promise,难道每个文件都要 import 一下吗?当然不是,Babel 官方已考虑这种情况,只需要使用 babel-plugin-transform-runtime 就可以解决手动 import 的苦恼了。
3babel-plugin-transform-runtime
babel-plugin-transform-runtime 装了就不需要装 babel-runtime了,因为前者依赖后者。
总的来说,babel-plugin-transform-runtime 就是可以在我们使用新 API 时 自动 import babel-runtime 里面的 polyfill,具体插件做了以下三件事情:
1) 当我们使用 async/await 时,自动引入 babel-runtime/regenerator;
2) 当我们使用 ES6 的静态事件或内置对象时,自动引入 babel-runtime/core-js;
3) 移除内联 babel helpers 并替换使用 babel-runtime/helpers 来替换;
babel-plugin-transform-runtime 优点:
1) 不会污染全局变量;
2) 多次使用只会打包一次;
3) 依赖统一按需引入,无重复引入,无多余引入;
4) 避免 babel 编译的工具函数在每个模块里重复出现,减小库和工具包的体积;
使用方式
在 .babelrc 中配置:
- plugins:\["tranform-runtime"\]
打包后大小为 17.4kb,比之前的280kb要小很多。
gulp打包报错 - 问题分析与解决方案
页面 是用gulp起的服务,然后写的代码,这次是在js里用了es7的async/await,导致打包完之后报错:
Uncaught ReferenceError: regeneratorRuntime is not defined
一、原因分析(regeneratorRuntime函数)
在程序中使用了 async/await ,经过@babel/preset-env 解析后会将代码转换为一个名为regeneratorRuntime的函数,但是转换后的代码仅仅存在这个函数的调用,并没有具体的定义体现。
通过百度,好多人会告诉你让你去装一个叫做
- 'transform-runtime'
transform-runtime插件是运行在node服务器上的,所以即使你装了,浏览器照样不认识。
二、解决方案(babel-polyfill编译)
需要的在gulp-babel给你编译的时候,把regeneratorRuntime再转换一次,这就用到了babel的babel-polyfill。
安装完成以后,在node_modules里边找到这个包,然后把dist下的polyfill.min.js这个js引入到页面的head里边去,这样再一次打包的时候,_asyncToGenerator 这个东西就会返回一个函数了,函数浏览器是认识的,再运行一下项目就没问题了。
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的