我正在尝试将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 "../".
如果我尝试引用js相对于html文件的特定文件，则它可以正常工作
<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
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句