Babel对ES2015中 Generator 的支持

最新推荐文章于 2024-04-27 09:31:14 发布

yaomj1986

最新推荐文章于 2024-04-27 09:31:14 发布

阅读量337

点赞数

分类专栏： JavaScript 文章标签： es6 generator babel

本文链接：https://blog.csdn.net/y523006369/article/details/103462674

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Babel对 Generator 的支持

最近新搭了一个react项目，用的ES2015，但是在运行生成器函数（Generator Function）的时候出现了报错，报错内容如下：

Uncaught TypeError: Cannot read property 'mark' of undefined

跟踪运行，查找报错位置：

var _marked = /*#__PURE__*/regeneratorRuntime.mark(generator);

默认babel是不支持generator函数的，官方提示是需要Babel polyfill 或者 regenerator runtime 的支持

我这里直接使用Babel polyfill

安装babel-polyfill

 npm install --save-dev babel-polyfill

使用

通过webpack

module.exports = {
    entry: {
        index: [
            'babel-polyfill' #增加
            ,'react-hot-loader/patch'
            , 'webpack-dev-server/client?http://localhost:8080'
            , 'webpack/hot/only-dev-server'
            , path.resolve(APP_PATH, 'index.js')]
    },
    ……
}

入口js文件

在代码头部加载babel-polyfill,注意一定要在代码开始前，第一个js文件的顶部。如果是vue在main.js头部，如果是其他的环境就在你入口js文件的顶部

import 'babel-polyfill';
// 或者
require('babel-polyfill');

关于babel-polyfill

它的初衷是模拟（emulate）一整套 ES2015+ 运行时环境，所以它的确会以全局变量的形式 polyfill Map、Set、Promise 之类的类型，也的确会以类似 Array.prototype.includes() 的方式去注入污染原型，这也是官网中提到最适合应用级开发的 polyfill。

如果在开发 library 的话，不推荐使用（或者说绝对不要使用）。

不同于插件，需要将 babel-polyfill 一次性的引入到工程中，通常是和其他的第三方类库（如 jQuery、React 等）一同打包在 vendor.js 中即可。在你写程序的时候，你完全不会感知 babel-polyfill 的存在，如果你的浏览器已经支持 Promise，它会优先使用 native 的 Promise，如果没有的话，则会采用 polyfill 的版本（这个行为与 babel-plugin-transform-runtime 一致）。

在使用 babel-polyfill 后，不需要引入 babel-plugin-transform-runtime 插件和其他依赖的类库。它的缺点也显而易见，那就是占文件空间并且无法按需定制。