本文转载自微信公众号《前端学院》，作者前端小甲。转载本文请联系前端学院公众号。简单总结一下：1.项目中使用ES7的async/await报错，最近需要对node代码进行混淆编译。原来ES6打包混乱的问题解决了。我正在使用gulp包装。为了提高代码质量，还有asynchronous操作顺序有问题，使用了async/await语法，原来的gulpfile混淆又出问题了。问题：打包后，浏览器报错gulpUncaughtReferenceError:regeneratorRuntimeisnotdefinedbabelpolyfill的一些认识1.babel与babelpolyfill的关系1.首先，我们了解一下babel是干什么的？简单来说，babel就是在语法层面解决问题。用于将ES6+的高级语法转换为ES5。2、babelpolyfill是做什么的？如果想解决API层面的问题，就需要使用shim。例如，常见的有babel-polyfill、babel-runtime和babel-plugin-transform-runtime。理清了它们之间的关系，我们就正式来说说polyfills。2.polyfill的种类babelpolyfill*babel-polyfill*babel-runtime*babel-plugin-transform-runtime1babel-polyfillbabel-polyfill是通过在全局对象的原型上添加方法，内置对象。所以这造成了全球空间污染。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-polyfills都打包成了一个整体。而且babel-polyfill也必须实现所有新的ES6API，而且文件不能小。那么有没有一种方法可以使用相应的shim，而不是根据实际代码中使用的ES6新API来加载它们呢？是的，有。即babel-runtime&babel-plugin-transform-runtime，它们可以实现按需加载。2babel-runtime简单来说，babel-runtime更像是一种按需加载的实现。比如需要使用Promise的地方，只需要在这个文件的header中importPromisefrom'babel-runtime/core-js/promise'即可。但是如果你有很多文件要使用Promise，你是否必须导入每个文件？当然不是，Babel官方已经考虑到了这种情况，你只需要使用babel-plugin-transform-runtime就可以解决手动导入的麻烦。3babel-plugin-transform-runtime安装了babel-plugin-transform-runtime，不需要安装babel-runtime，因为前者依赖于后者。总的来说，babel-plugin-transform-runtime是一个polyfill，可以在我们使用新的API时自动导入babel-runtime。具体插件做了以下三件事：1）当我们使用async/await时，自动导入babel-runtime/regenerator；2）当我们使用ES6的静态事件或内置对象时，自动导入babel-runtime/core-js;3)去掉内联的babelhelpers，换成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，导致打包后报错：UncaughtReferenceError:regeneratorRuntimeisnotdefined，原因分析（regeneratorRuntime函数）在程序中使用了async/await，@babel/preset后-env解析，代码会被转换成一个名为regeneratorRuntime的函数，但是转换后的代码只存在这个函数的调用，并没有体现具体的定义。通过百度，很多人会告诉你安装一个叫做“transform-runtime”的插件。transform-runtime插件运行在node服务器上，所以即使你安装了，浏览器仍然无法识别。2、解决方案（babel-polyfill编译）gulp-babel给你编译的时候，再转换一下regeneratorRuntime，就是用babel的babel-polyfill。安装完成后，在node_modules中找到这个包，然后将dist下的jspolyfill.min.js导入到页面头部，这样再次打包时，_asyncToGenerator会返回一个函数，函数浏览器为识别出来，再次运行项目就没有问题了。
