使用parcel报错regeneratorRuntime is not defined和parcelRequire is not defined

使用parcel报错regeneratorRuntime is not defined

使用parcel打包部署js文件后发现控制台报错

报错信息

解决方法

Parcel使用的 Babel会生成一个 polyfill，但为避免此错误，您还需要加载regenerator-runtime运行库。

两种解决方法：

1.添加到主 JavaScript 文件的顶部：

import 'regenerator-runtime/runtime'

Parcel 默认会包含这个包，增加 25KB 的大小。
如果没有效果先删除.cache文件再试试

2.添加browserslist

最有效的解决方案是将browserslist添加到您的 package.json。

例如：

"browserslist": [
  "last 1 Chrome version"
]

支持多种浏览器：

"browserslist": [
  "last 3 and_chr versions",
  "last 3 chrome versions",
  "last 3 opera versions",
  "last 3 ios_saf versions",
  "last 3 safari versions"
]

或者：

"browserslist": [
  "since 2017-06"
]

报错原因

因为browserslist可以根据提供的目标浏览器的环境来智能添加css前缀，js的polyfill垫片来兼容旧版本浏览器。避免不必要的兼容代码，以提高代码的编译质量。当没有该属性时Babel 不会尝试添加 polyfill垫片，需要自己手动添加regenerator-runtime运行库。
当生成器函数、async、await函数经babel编译后，添加的regenerator-runtime模块用于提供功能实现。

查看更多browserslist相关:

• https://github.com/browserslist/browserslist

报错 parcelRequire is not defined

项目打包入口是一个使用了import等模块化语法的index.js静态文件,将其导入进静态html，使用parcel打包部署后控制台就会报错。

<script src="../index.js" type="module"></script>

报错信息

解决方法

1.在浏览器下载该script脚本后解析前 我们可以先定义该变量

var parcelRequire;

或者第二种方法

2.删除脚本的type属性

<script src="../index.js"></script>

即可解决问题

其他解决方法可以查看第二篇参考来源

报错原因

这是parcelRequire严格模式中定义方式的问题。
ES6 模块默认以严格模式 (AFIK) 执行，该模式禁止隐式变量声明。

参考来源

• Parcel, how to fix the regeneratorRuntime is not defined error
• ES Module type=module cause "parcelRequire is not defined" error #1401