「~ gulp打包支持es7语法 ~」

* 学习进阶方式 💪

基础知识要夯实；

原理源码要深入；

深度广度要扩展；

简短的概括：

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

1､babel-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，他们可以实现按需加载。

2､babel-runtime

简单说 babel-runtime 更像是一种按需加载的实现，比如你哪里需要使用 Promise，只要在这个文件头部

import Promise from 'babel-runtime/core-js/promise'

不过如果你许多文件都要使用 Promise，难道每个文件都要 import 一下吗？当然不是，Babel 官方已考虑这种情况，只需要使用 babel-plugin-transform-runtime 就可以解决手动 import 的苦恼了。

3､babel-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  这个东西就会返回一个函数了，函数浏览器是认识的，再运行一下项目就没问题了。

推荐热门技术文章：

金三银四，一线高频面试题 （想深入看这里）

性能优化决定一切 （想深入看这里）

觉得本文对你有帮助？请分享给更多人

关注「前端学苑」加星标，提升前端技能

如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~