在HTML文件的脚本JS标签中使用ES6依赖项

问题描述

我正在尝试将uuid模块（这是项目依赖项）加载到由webpack管理的项目的.html文件中。

<script type="module">
      import { v4 as uuidv4 } from "uuid";
      window.uuidv4 = uuidv4;

      console.log('uuidv4 ',uuidv4);
 </script>

但这失败，并显示错误(index):1 Uncaught TypeError: Failed to resolve module specifier "uuid". Relative references must start with either "/","./",or "../".

如果我尝试引用相对于html文件的特定js文件，则它可以正常工作

<script type="module">
      import myFunc from "./functions/myFunc.js";
      window.uuidv4 = uuidv4;

      console.log('uuidv4 ',uuidv4);
 </script>

为什么我不能直接在html中调用依赖项，尽管如果直接从myFunc.js加载依赖项也可以吗？

myFunc.js

import { v4 as uuidv4 } from "uuid";
console.log('uuidv4 ',uuidv4); // this works here

export default myFunc() {
   console.log('Hello!');
}

解决方法

import { v4 as uuidv4 } from "uuid";在myFunc.js内工作的原因是因为它被Webpack捆绑了，并且Webpack知道如何在捆绑时间内不使用"/","./",or "../"来解析模块。最终，所有这些模块都将在同一文件bundle.js中（如果尚未自定义）。

直接在HTML中使用导入时，JS代码直接在浏览器内部运行。因此，浏览器不了解如何解释它。进一步了解以下说明：https://javascript.info/modules-intro#no-bare-modules-allowed

es6-modules import javascript