“parcelRequire is not defined”

最近在工作的时候，遇到了一个问题，花费了一小段时间哈哈哈。分享一下～

主要是场景比较特殊，网上的解决方案都不太适用。记录一下，希望下一个遇到问题的人看到这文章有所帮助。

问题：

我在用的一个外部包，它是通过parcel打包出来的。我正常的import这个包但是无法运行。

原因：**parcelRequire** **是在运行时代码中隐式声明的全局变量，用于加载和解析依赖项。在严格模式下，隐式声明变量是不允许的，因此如果你的代码中存在未声明的变量或函数，并且你正在使用严格模式，则大概率出现这个问题。**ES6 模块默认以严格模式 (AFIK) 执行，该模式禁止隐式变量声明。

 方案一：（能解决大部分人遇到的问题）

// 在index.html中显示声明
<script>
var parcelRequire;
</script>

但是我们项目架构原因，模版内不能放相关的js操作。所以上面不适用。

方案二：（适用于不在模版处理，定义后再引入我们的外部包）

// xxx -> parcel构建的外部包
window.onload = function () {
  // 解决 parcelRequire is not defined 的问题
  window.parcelRequire = null;
  import("xxx")
    .then(liveMonitor => {
      console.log("%c引入成功", "color:green");
    })
    .catch(err => {
      console.error("引入失败 error", err);
    });
};

最后捣鼓发现，还有第三种！

方案三：（适用于vite架构，多个parcel包引入以及方案二无法解决）

// 在构建的时候定义一个parcelRequire
export default ({ mode }) => {
  ...
  return defineConfig({
    define: {
      parcelRequire: null
    },
  });
  ...
};