JavaScript：導入 npm 包

Question

我對 javascript 模塊不是很熟悉。 我開始從事一個項目，為此我需要一個來自 npm 的庫。

https://www.npmjs.com/package/random-color-pair

因此，當我運行npm i random-color-pair

這創建了一個名為“節點模塊”的文件夾，其中包含包的文件。 我嘗試了多種方法將其導入到我的 javascript 中，但找不到這樣做的方法。

文件結構：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="main.js" type="module">
        
    </script>
</body>
</html>

我已經嘗試了以下（它們都不起作用）：

import getColorPair from "random-color-pair";
import getColorPair from "node_modules/random-color-pair";
import getColorPair from "./node_modules/random-color-pair";
import "./node_modules/random-color-pair";
import getColorPair from "./node_modules/random-color-pair/index";
import "./node_modules/random-color-pair/index";

Answer 1

這不會立即起作用，您將需要像 webpack 或 parcel 這樣的打包器來編譯/組合包中的代碼與您的代碼。 我將向您展示如何使用和配置 Parcel，因為那是最簡單的。

首先安裝捆綁器：

npm install parcel-bundler -D

更新package.json的scripts部分

{
  "scripts": {
    "dev": "parcel ./index.html",
    "build": "parcel build ./index.html"
  }
}

現在你可以從 npm 安裝任何模塊：

npm i <module_name>

並將其導入到您的main.js文件中，如下所示：

import module_name as 'module_name';

要啟動您的開發服務器（在您更新代碼時會自動更改），請運行以下命令：

npm run dev

對於生產包（可以上傳到托管平台）：

npm run build

我希望這對您有用，如果對您有用，請告訴我！

Answer 2

random-color-pair內部使用這個庫： randomcolor 。

你應該像這樣直接安裝它：npm i randomcolor

並像這樣導入它：

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="node_modules/randomcolor/randomColor.js"></script>
    <script src="main.js"></script>
</body>
</html>

JS (main.js) :

function getColorPair() {
  const isForegroundDark = Math.random() < 0.5
  const foregroundColor = randomColor({
    luminosity: isForegroundDark ? 'dark' : 'light'
  })
  const backgroundColor = randomColor({
    luminosity: isForegroundDark ? 'light' : 'dark'
  })
  return [foregroundColor, backgroundColor]
}

var color = getColorPair();
console.log("color", color);

不需要在 JS 文件中導入任何東西。

JavaScript：導入 npm 包

問題描述

2 個解決方案

解決方案1
1 已采納 2021-07-26 12:26:50

解決方案2
0 2021-07-26 11:24:15

HTML :

JS (main.js) :

JavaScript：導入 npm 包

問題描述

2 個解決方案

解決方案1 1 已采納 2021-07-26 12:26:50

解決方案2 0 2021-07-26 11:24:15

HTML :

JS (main.js) :

解決方案1
1 已采納 2021-07-26 12:26:50

解決方案2
0 2021-07-26 11:24:15