Javascript：未定义模块（UMD 格式模块）答案

【问题标题】：Javascript: Module is not defined (UMD Format module)Javascript：未定义模块（UMD 格式模块）
【发布时间】：2020-05-07 21:49:07
【问题描述】：

使用 Rollupjs，我尝试在我的 index.html 页面上运行我的模块

<script type="module" src="./bundle.js" ></script>
<script>
  window.addEventListener('load', () => {
    const lib = new MyLibrary();
    console.log(lib);
  });
</script>

我收到以下错误：

(index):17 Uncaught ReferenceError: MyLibrary is not defined

模块格式为UMD。谢谢！

【问题讨论】：

<script type="module"> 对于 UMD 模块没有意义。

标签： javascript undefined onload umd

【解决方案1】：

如何确保在您的脚本之前加载您的模块。我认为您应该尝试使用async 或defer 标志加载第一个脚本。例如

与defer

<script defer type="module" src="./bundle.js"></script>
<script>
  window.addEventListener('load', () => {
    const lib = new MyLibrary();
    console.log(lib);
  });
</script>

与async

<script async type="module" src="./bundle.js"></script>
<script>
  window.addEventListener('load', () => {
    const lib = new MyLibrary();
    console.log(lib);
  });
</script>

还要确保检查 MyLibrary 类是否已加载。例如，您可以使用浏览器开发者控制台并输入类名，即MyLibrary，如果出现则表示模块已加载。如果它显示未定义...您知道您在加载脚本时遇到了问题。可能与parcel 配置有关。如果您仍有问题，请分享您的捆绑程序代码和目录结构图像。

【讨论】：