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

Question

我正试图在webpack、管理的项目中的.html文件中加载uuid模块，这是一个项目依赖项

<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!');
}

Answer 1

import { v4 as uuidv4 } from "uuid";在myFunc.js中工作的原因是它被Webpack捆绑，Webpack知道如何在捆绑期间解析没有"/", "./", or "../"的模块。最终，所有这些模块都将在同一个文件bundle.js中(如果您还没有自定义它的话(。

当您直接在HTML中使用导入时，JS代码直接在浏览器中运行。所以浏览器不知道如何解释它。查看此解释了解更多信息：https://javascript.info/modules-intro#no-允许的裸模块