Rollup打包后报regeneratorRuntime is not defined错误求助
问题核心原因
你配置中的legacy包加载逻辑完全写反,同时Babel配置存在缺失,具体如下:
- Legacy输出的加载判断条件写反
你在polyfillsLoader.legacyOutput.test中配置的是'!!Array.prototype.flat',这个字段的含义是:当表达式返回true时,加载legacy兼容包。
现代浏览器几乎都支持Array.prototype.flat,这就导致所有现代浏览器都会错误加载ES5格式的legacy包,而legacy包中被Babel转译后的async/await、generator语法依赖全局的regeneratorRuntime,现代浏览器原生支持这些语法,polyfill注入逻辑不会额外注入regeneratorRuntime,最终触发全局未定义的报错。 - Babel配置缺少polyfill注入规则
你当前的@babel/preset-env仅配置了转译目标和模块格式,没有配置polyfill的注入策略,即便在正确加载legacy包的低版本浏览器中,也可能因为regeneratorRuntime未被正确导入而报错。
修复步骤
- 修正legacy包的加载判断条件
把polyfillsLoader.legacyOutput.test的值改为'!Array.prototype.flat',含义为:只有当浏览器不支持Array.prototype.flat时(比如IE11),才加载legacy兼容包。
修改后的对应配置片段:
legacyOutput: { name: 'legacy', test: '!Array.prototype.flat', // 去掉一个感叹号,逻辑反转 type: 'systemjs', },
- 完善Babel的polyfill注入配置
首先安装所需依赖:npm install core-js@3 regenerator-runtime --save-dev
然后修改legacy输出中的@babel/preset-env配置,添加useBuiltIns和corejs字段,让Babel自动按需注入所需的polyfill:
getBabelOutputPlugin({ compact: true, presets: [ [ '@babel/preset-env', { targets: { ie: '11', }, modules: 'systemjs', // 新增配置 useBuiltIns: 'usage', corejs: 3, }, ], ], }),
- 可选调整:调整插件执行顺序
把terser压缩插件移到所有代码处理、polyfill注入插件的后面,避免压缩逻辑影响polyfill的注入和识别,修改后的plugins顺序片段:
plugins: [ htmlPlugin, resolve(), minifyHTML(), polyfillsLoader({/* 原有配置 */}), summary(), copy({ patterns: ['data/**/*', 'images/**/*'] }), // 压缩插件移到最后 terser({ module: true, warnings: true, }), ],
内容的提问来源于stack exchange,提问作者Marc Rasmussen
相关产品推荐
相关产品推荐

