代码之家 › 专栏 › 技术社区 › Borja

如何在浏览器中使用npm模块?是否可以在本地(PC)中使用它们?

npm-install module npm node.js javascript

Borja · 技术社区 · 8 年前

我是新手 npm module 和节点。所以这对我来说真的很难。

我有一个包含许多点的js代码,对于每个点,我都想得到最近的城市。

要做到这一点,在另一个问题上( Reverse geocoding with big array is fastest way? - javascript and performance ),一位用户建议我使用两个 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上使用模块?

4 回复 | 直到 4 年前

Walty Yeung 6 年前

browserify 是正确的方向,但我花了相当多的精力才找到实际的解决方案。我总结了 short blog 对于这一点,下面是一些简要回顾:

比如,你想使用 emailjs-mime-parser 和 buffer HTML中的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 main.js -o bundle.js

现在,你可以使用 bundle.js 在HTML文件中。

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

Lucas Meine 8 年前

是的,您可以直接在浏览器上使用npm模块。

Browserify 是一个很好的选择。

直接摘自他们的页面:

浏览器没有定义require方法,但定义了Node。js有。具有 Browserify您可以编写使用require的代码,方法与您可以在节点中使用它。

现在请回答其他问题:

是否必须安装节点。我的服务器上的js?

对但您只需要node来安装browserify,并将您的javascripts捆绑到一个文件中,您可以直接将其包含在html中。因此,一旦获得了捆绑文件,就可以在任何地方提供它,而无需节点。

是否可以在本地PC上使用模块?

对您可以在本地PC上执行几乎任何操作。您可以将其用作开发目的的服务器并运行节点。例如,其中的js服务器。

Netsi1964 6 年前

https://unpkg.com/

您可以使用从NPM包中提取内容 unpkg.com . 例如,如果需要获取聚合物纸按钮web组件,可以指向: https://unpkg.com/@polymer/paper-button@3.0.1

KevynTD 4 年前

如果您的案例是100%前端的,而不依赖于某些服务器,则可以使用ES模块语法,并结合使用 https://www.skypack.dev/ 它将公共JS中的模块转换为ES模块。

使用 type="module" 中的属性 script 标记以正常工作,此服务也在本地工作

<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?