如何在浏览器中使用 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