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

我正在尝试加载

uuid

模块，它是一个项目依赖项，位于webpack管理的项目中的.html文件中

<script type="module">
      import { v4 as uuidv4 } from "uuid";
      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!');
}

---

原因

从“uuid”导入{v4 as uuidv4}

在

myFunc.js

中起作用是因为它是由Webpack绑定的，而Webpack知道如何在绑定期间解析没有

“/”、“/”或“./”的模块。最终，所有这些模块都将位于同一个文件
bundle.js
（如果您没有自定义它的话）

在HTML中直接使用导入时，JS代码直接在浏览器中运行。所以浏览器不知道如何解释它。查看此说明了解更多信息：
您需要搜索解决方案以导入HTML文件中的“裸模块”。当我拿到笔记本电脑时，我会尽力回答。你现在正在使用捆绑机吗？是的，我正在使用webpack
import { v4 as uuidv4 } from "uuid";
console.log('uuidv4 ', uuidv4); // this works here

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