如何在瀏覽器中使用 npm 模塊？甚至可以在本地（PC）中使用它們？

Question

我是npm module和 node.js 的新手，所以對我來說真的很難。

我有一個有很多點的 js 代碼，對於每個點，我都想得到最近的城市。

為此，在其他問題中（使用大數組進行反向地理編碼是最快的方法？-javascript 和性能），用戶建議我使用兩個npm 模塊，

const kdbush = require('kdbush');
const geokdbush = require('geokdbush');

// I've stored the data points as objects to make the values unambiguous
const cities = [
  { name: "Abano Terme (PD)", latitude: 45.3594, longitude: 11.7894 },
  { name: "Abbadia Cerreto (LO)", latitude: 45.3122, longitude: 9.5928 },
  { name: "Abbadia Lariana (LC)", latitude: 45.8992, longitude: 9.3336 },
  { name: "Abbadia San Salvatore (SI)", latitude: 42.8800, longitude: 11.6775 },
  { name: "Abbasanta (OR)", latitude: 40.1250, longitude: 8.8200 }
];

// Create the index over city data ONCE
const index = kdbush(cities, ({ longitude }) => longitude, ({ latitude }) => latitude);

// Get the nearest neighbour in a radius of 50km for a point with latitude 43.7051 and longitude 11.4363
const nearest = geokdbush.around(index, 11.4363, 43.7051, 1, 50);

問題是這是我第一次接觸這個。 此外，我是意大利人，英語說得不太好，在意大利語谷歌中什么也沒有。

你能告訴我如何使用這些模塊嗎？

我必須在我的服務器上安裝Node.js嗎？

是否可以在本地 PC 上使用模塊？

Answer 1

browserify是正確的方向，但我花了很多精力來制定實際的解決方案。 我為此總結了一個簡短的博客，這里有一些快速回顧：

假設您想在 HTML 中使用emailjs-mime-parser和buffer npm 庫。

安裝所需的一切

npm install -g browserify
npm install emailjs-mime-parser
npm install buffer

編寫一個簡單的main.js作為包裝器：

var parse = require('emailjs-mime-parser').default
var Buffer = require('buffer').Buffer
global.window.parseEmail = parse
global.window.Buffer = Buffer

使用browserify編譯一切

browserify main.js -o bundle.js

現在，您可以在 HTML 文件中使用bundle.js 。

<html>
<head>
<script src='bundle.js'></script>
<script>
console.log(window.parseEmail);
console.log(window.Buffer);
</script>
<body>
</body>
</html>

Answer 2

是的，您可以直接在瀏覽器上使用 npm 模塊。

Browserify是一個很好的選擇。

直接取自他們的頁面：

瀏覽器沒有定義 require 方法，但 Node.js 有。 使用 Browserify，您可以編寫使用 require 的代碼，就像在 Node.js 中使用它的方式一樣。

現在你的其他問題：

我必須在我的服務器上安裝 Node.js 嗎？

是的。 但是您只需要 node 來安裝 browserify 並將您的 javascripts 捆綁到一個可以直接包含在 html 中的文件中。 所以，一旦你有了捆綁的文件，你就可以在沒有 node.js 的任何地方提供它。

是否可以在本地 PC 上使用模塊？

是的！ 您幾乎可以在本地 PC 上執行任何操作。 例如，您可以將其用作用於開發目的的服務器並在其中運行 node.js 服務器。

Answer 3

https://unpkg.com/

您可以使用unpkg.com從 NPM 包中提取內容。 例如，如果您需要獲取 Polymer 紙按鈕 Web 組件，您可以指向： https : //unpkg.com/@polymer/paper-button@3.0.1

Answer 4

如果你的情況是 100% 前端，不依賴於某些服務器，你可以使用 ES 模塊語法，並結合使用https://www.skypack.dev/將 Common JS 中的模塊轉換為 ES 模塊.

使用script標簽內的type="module"屬性才能正常工作很重要，該服務也可以在本地工作

 <script type="module"> // Use 'https://cdn.skypack.dev/' + 'npm package name' + '@version its optional' import random from 'https://cdn.skypack.dev/canvas-sketch-util@1.10.0/random' console.log('A random number: ', random.range(1,10)) </script>

在很多情況下https://unpkg.com/無法處理而https://www.skypack.dev/可以，所以我建議在前端使用它

我在這里寫了一個稍微更完整的答案： How can I use a CommonJS module on JSFiddle?

Answer 5

是的，您必須下載 node.js。 請按照以下說明操作： https ://www.npmjs.com/get-npm “npm 與 Node.js 一起分發-這意味着當您下載 Node.js 時，您的計算機上會自動安裝 npm。”

所以下載 Node.js（按照上面鏈接中的步驟看看你是否已經有了它）。 然后使用 CLI（命令行界面）查找源組件目錄。 進入該目錄后，使用 npm 命令安裝包（其中包含您需要的模塊）。 根據您使用的庫或框架將決定您如何使用這些模塊。 如果您將它們保存在本地，正如我所描述的，那么根據您的目錄路徑，您可以訪問模塊： require('.path/to/your/npm_modules/example.js');

我希望這會有所幫助。 Non ho tanto tempo allora non posso scrivere di piu'。 Io parlo Italiano, ma non ho parlato di computer spesso。 博納財富。

如何在瀏覽器中使用 npm 模塊？甚至可以在本地（PC）中使用它們？

問題描述

4 個解決方案

解決方案1
44 2020-01-07 03:05:37

解決方案2
22 2018-03-29 18:54:23

解決方案3
12 2020-01-18 09:13:30

解決方案4
6 2022-03-01 01:43:34

解決方案5
1 2018-03-29 19:07:55

如何在瀏覽器中使用 npm 模塊？ 甚至可以在本地（PC）中使用它們？

問題描述

4 個解決方案

解決方案1 44 2020-01-07 03:05:37

解決方案2 22 2018-03-29 18:54:23

解決方案3 12 2020-01-18 09:13:30

解決方案4 6 2022-03-01 01:43:34

解決方案5 1 2018-03-29 19:07:55

如何在瀏覽器中使用 npm 模塊？甚至可以在本地（PC）中使用它們？

解決方案1
44 2020-01-07 03:05:37

解決方案2
22 2018-03-29 18:54:23

解決方案3
12 2020-01-18 09:13:30

解決方案4
6 2022-03-01 01:43:34

解決方案5
1 2018-03-29 19:07:55