如何在浏览器中使用 npm 模块？甚至可以在本地（PC）中使用它们？

Question

I'm new to npm module and node.js so it is really difficult to me.我是npm module和 node.js 的新手，所以对我来说真的很难。

I have a js code whit many points and for each one of them I want to get the nearest city.我有一个有很多点的 js 代码，对于每个点，我都想得到最近的城市。

To do this, in other question ( Reverse geocoding with big array is fastest way? - javascript and performance ), a user suggested me to use two npm modules ,为此，在其他问题中（使用大数组进行反向地理编码是最快的方法？-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);

The problem is this is the first time that I approach at this.问题是这是我第一次接触这个。 Besides I'm Italian and don't speak English very well, and in Italian Google there's nothing.此外，我是意大利人，英语说得不太好，在意大利语谷歌中什么也没有。

Can you tell me how could I use these modules?你能告诉我如何使用这些模块吗？

Do I have to install Node.js on my server?我必须在我的服务器上安装Node.js吗？

Is it possible to use modules on local PC?是否可以在本地 PC 上使用模块？

Answer 1

browserify is the correct direction, but it took me quite some effort to work out the actual solution. browserify是正确的方向，但我花了很多精力来制定实际的解决方案。 I have summarized a short blog for this, and here are some quick recap:我为此总结了一个简短的博客，这里有一些快速回顾：

Say, you want to use emailjs-mime-parser and buffer npm libraries in your HTML.假设您想在 HTML 中使用emailjs-mime-parser和buffer npm 库。

install everything required安装所需的一切

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

write a simple main.js as a wrapper:编写一个简单的main.js作为包装器：

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

compile everything using browserify使用browserify编译一切

browserify main.js -o bundle.js

now, you could use bundle.js inside the HTML file.现在，您可以在 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

Yeah, you can use npm modules directly on the browser.是的，您可以直接在浏览器上使用 npm 模块。

Browserify is an excelent option for that. Browserify是一个很好的选择。

Taken straight from their page:直接取自他们的页面：

Browsers don't have the require method defined, but Node.js does.浏览器没有定义 require 方法，但 Node.js 有。 With Browserify you can write code that uses require in the same way that you would use it in Node.使用 Browserify，您可以编写使用 require 的代码，就像在 Node.js 中使用它的方式一样。

Now your other questions:现在你的其他问题：

Do I have to install Node.js on my server?我必须在我的服务器上安装 Node.js 吗？

Yes.是的。 But you need node just to install browserify and to bundle your javascripts into a single file that you can include directly on the html.但是您只需要 node 来安装 browserify 并将您的 javascripts 捆绑到一个可以直接包含在 html 中的文件中。 So, once you have the bundled file, you can serve it from anywhere without node.所以，一旦你有了捆绑的文件，你就可以在没有 node.js 的任何地方提供它。

Is it possible to use modules on local PC ?是否可以在本地 PC 上使用模块？

Yes!是的！ You can do pretty much anything on your local PC.您几乎可以在本地 PC 上执行任何操作。 You can use it as a server for development purposes and run a node.js server in it, for example.例如，您可以将其用作用于开发目的的服务器并在其中运行 node.js 服务器。

Answer 3

https://unpkg.com/ https://unpkg.com/

You can pull content from a NPM package using unpkg.com .您可以使用unpkg.com从 NPM 包中提取内容。 If for instance you need to get the Polymer paper-button web component, you can point to: https://unpkg.com/@polymer/paper-button@3.0.1例如，如果您需要获取 Polymer 纸按钮 Web 组件，您可以指向： https : //unpkg.com/@polymer/paper-button@3.0.1

Answer 4

If your case is 100% frontend, without depending on some server, you can use the ES Modules syntax for that, and combine with the use of https://www.skypack.dev/ which converts the modules in Common JS to ES Modules.如果你的情况是 100% 前端，不依赖于某些服务器，你可以使用 ES 模块语法，并结合使用https://www.skypack.dev/将 Common JS 中的模块转换为 ES 模块.

It is important to use the type="module" attributes inside the script tag to work properly, this service works locally too使用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>

There are many cases that https://unpkg.com/ wouldn't handle that https://www.skypack.dev/ can, so I recommend using it whenever it's on the front-end在很多情况下https://unpkg.com/无法处理而https://www.skypack.dev/可以，所以我建议在前端使用它

I wrote a slightly more complete answer here about this: How can I use a CommonJS module on JSFiddle?我在这里写了一个稍微更完整的答案： How can I use a CommonJS module on JSFiddle?

Answer 5

Yes, you must download node.js.是的，您必须下载 node.js。 follow these directions: https://www.npmjs.com/get-npm "npm is distributed with Node.js- which means that when you download Node.js, you automatically get npm installed on your computer."请按照以下说明操作： https ://www.npmjs.com/get-npm “npm 与 Node.js 一起分发-这意味着当您下载 Node.js 时，您的计算机上会自动安装 npm。”

So download Node.js (follow the steps at the above link to see if you have it already).所以下载 Node.js（按照上面链接中的步骤看看你是否已经有了它）。 then use the CLI (Command Line Interface) to find your source component directory.然后使用 CLI（命令行界面）查找源组件目录。 Once you are within that directory use npm commands to install the package (which has the modules you need).进入该目录后，使用 npm 命令安装包（其中包含您需要的模块）。 Depending on what library or framework you are using will dictate how you use these modules.根据您使用的库或框架将决定您如何使用这些模块。 If you save them locally, as I'm describing, then base on your directory path you can access the modules: require('.path/to/your/npm_modules/example.js');如果您将它们保存在本地，正如我所描述的，那么根据您的目录路径，您可以访问模块： require('.path/to/your/npm_modules/example.js');

I hope this helps.我希望这会有所帮助。 Non ho tanto tempo allora non posso scrivere di piu'. Non ho tanto tempo allora non posso scrivere di piu'。 Io parlo Italiano, ma non ho parlato di computer spesso. Io parlo Italiano, ma non ho parlato di computer spesso。 Buona fortuna.博纳财富。

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