未捕獲的類型錯誤：無法解析 Javascript 中的模塊說明符“uuid”

Question

這大概是一個很簡單的問題，但是我看了很多文章都想不通。 我不知道任何 Node.js，我只想使用此處的 uuid 生成器。

當我按照說明進行操作時

import { v4 as uuidv4 } from 'uuid';
uuidv4();

瀏覽器告訴我“未捕獲的類型錯誤：無法解析模塊說明符“uuid”。相對引用必須以“/”、“./”或“../”開頭。 我猜我可能需要從“node_module”中導入 some.js 文件，所以我打開了 node_module，只看到很多我根本不了解的文件。 這非常令人沮喪，以后我嘗試使用任何其他 npm 模塊時可能會出現同樣的問題。

Answer 1

您正在嘗試在瀏覽器中運行 JavaScript，同時使用 Node.js。

可能您應該使用 Node.js 運行代碼，或者告訴瀏覽器在哪里可以找到您的模塊。

使用 Node.js

將您的代碼放入某個文件中，例如index.js並使用以下命令運行它：

$ cd dir/with/your/file
$ node index.js

您最好添加一些console.log以獲得結果。 否則 Node.js 將評估您的代碼並退出。

在瀏覽器中

正如我所說，瀏覽器應該知道你的uuid模塊所在的路徑。 它對這個模塊一無所知。 它需要 JS 文件的路徑。

有兩種方法：捆綁 deps 或使用導入映射。

要捆綁 dep，你需要安裝一個捆綁器——一個可以獲取每個 dep 的 JavaScript 代碼的工具（在你的例子中是uuid ），將它放入一個大的 JS 文件中並給你這個文件。 然后你可以在瀏覽器中運行這樣的文件。

最受歡迎的捆綁器是webpack ，所以也許您應該從它開始。 或者 google 一下 Parcel、Vite、esbuild、Rollup 等等。 它們都解決了與捆綁相關的類似問題。

另一種方法是告訴瀏覽器在哪里可以找到你的 dep。 例如，我們可以告訴它您的部門在 Skypack CDN 上：

<script type="importmap">
  {
    "imports": {
      "uuid": "https://cdn.skypack.dev/uuid"
    }
  }
</script>

在這篇 101 文章中閱讀有關導入地圖的更多信息。

希望能幫助到你。