無法導入“uuid”npm package。類型錯誤：相對引用必須以“/”、“./”或“../”開頭

Question

我正在嘗試將一個名為“uuid”的模塊導入我通過以下命令安裝的index.js腳本： npm install uuid 。

首先我嘗試使用 CommonJS 語法，但這給了我這個錯誤： Uncaught ReferenceError: require is not defined

const { v4: uuidv4 } = require('uuid');

// ReferenceError: require is not defined

我的 IDE 建議我將文件轉換為 ES 模塊：

import { v4 as uuidv4 } from 'uuid';

// SyntaxError: Cannot use import statement outside a module

通過將type="module"添加到我在 html 中的index.js腳本只會產生新的錯誤：

TypeError: Failed to resolve module specifier "uuid". Relative references must start with either "/", "./", or "../".

我已經搜索了一段時間，但找不到任何東西。 在嘗試按照錯誤消息說明進行操作時，我嘗試生成一個更直接的“uuid”模塊路徑，如下所示：

import { v4 as uuidv4 } from '../node_modules/uuid/dist/v4';

// GET http://localhost:3000/node_modules/uuid/dist/v4 net::ERR_ABORTED 404 (Not Found)

即使使用這個直接路徑，它也找不到奇怪的模塊，因為它至少在僅指定模塊名稱“uuid”時識別出一些東西。

如果對這里有任何幫助，這是我的package.json依賴項

"dependencies": {
    "express": "^4.18.1",
    "nodemon": "^2.0.20",
    "socket.io": "^4.5.2",
    "socket.io-client": "^4.5.4",
    "uuid": "^9.0.0"
 }

Answer 1

您正在嘗試從瀏覽器中運行的腳本中的node_modules導入uuid模塊。 不幸的是，就是這么簡單。 node_modules僅適用於 Node.js，瀏覽器不知道它們。 有多種方法可以解決此問題：

• 設置將提供uuid的 static 服務器。 然后，您可以通過其 url 導入它（例如import { v4 as uuidv4 } from './uuid'; ）。 一般不推薦這樣做。
• 使用CDN。 和之前的方法差不多，不過這次會有人給你架設一個static的服務器。 由於性能良好，這經常用於生產中，您不需要為此做任何事情。 很簡單： import { v4 as uuidv4 } from 'https://jspm.dev/uuid';
• 但並非所有庫都托管在 CDN 上。 此外，您可能需要優化依賴項和代碼。 因此，對於復雜的應用程序，您應該使用所謂的捆綁器。 這里有一些最流行的： Vite 、 Rollup 、 Webpack 、 Parcel 。 捆綁器的作用：他們分析您的導入，然后生成一個稱為“入口點”的 js 文件。 根據配置，他們可以將所有依賴項合並到一個文件中，或者插入特殊代碼，以便在代碼執行需要時從其他文件動態導入您的依賴項。