69

I'm new to npm module and node.js so it is really difficult to me.

I have a js code whit many points and for each one of them I want to get the nearest city.

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,

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?

Is it possible to use modules on local PC?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Borja
  • 3,359
  • 7
  • 33
  • 66

4 Answers4

72

browserify is the correct direction, but it took me quite some effort to work out the actual solution. 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.

  1. install everything required
npm install -g browserify
npm install emailjs-mime-parser
npm install buffer
  1. write a simple main.js as a wrapper:
var parse = require('emailjs-mime-parser').default
var Buffer = require('buffer').Buffer
global.window.parseEmail = parse
global.window.Buffer = Buffer
  1. compile everything using browserify
browserify main.js -o bundle.js
  1. now, you could use bundle.js inside the HTML file.
<html>
<head>
<script src='bundle.js'></script>
<script>
console.log(window.parseEmail);
console.log(window.Buffer);
</script>
<body>
</body>
</html>
Walty Yeung
  • 3,396
  • 32
  • 33
  • 7
    Found this cool site: https://wzrd.in where you can do all of this in browser w/o installing anything. – Neeraj Sep 27 '20 at 15:19
  • 1
    @Neeraj Unfortunately that browserify as a service site no longer works - on github - since april 21 it was reported that it 502s and still is doing that today. – amurrell Dec 30 '21 at 05:28
  • Downvoted, because it doesn't answer the original question (how do I use modules in browser) but an entirely different question (how do I turn modules into something that isn't modules at all, but can be used in browser). – Szczepan Hołyszewski Dec 23 '22 at 11:51
  • @SzczepanHołyszewski I cannot see the difference between those 2 questions, if you have to do the latter to achieve the former. – BitTickler May 16 '23 at 06:07
  • @BitTickler If. – Szczepan Hołyszewski May 17 '23 at 18:24
31

https://unpkg.com/

You can pull content from a NPM package using unpkg.com. 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

Netsi1964
  • 3,244
  • 1
  • 27
  • 17
  • 8
    Unpkg is a slow cdn. JSDelivr is a slightly better alternative, it also supports github just in case. –  Nov 28 '20 at 06:00
26

Yeah, you can use npm modules directly on the browser.

Browserify is an excelent option for that.

Taken straight from their page:

Browsers don't have the require method defined, but Node.js does. With Browserify you can write code that uses require in the same way that you would use it in Node.

Now your other questions:

Do I have to install Node.js on my server?

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. So, once you have the bundled file, you can serve it from anywhere without node.

Is it possible to use modules on local PC ?

Yes! You can do pretty much anything on your local PC. You can use it as a server for development purposes and run a node.js server in it, for example.

Lucas Meine
  • 1,524
  • 4
  • 23
  • 32
13

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.

It is important to use the type="module" attributes inside the script tag to work properly, this service works locally too

<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

I wrote a slightly more complete answer here about this: How can I use a CommonJS module on JSFiddle?

KevynTD
  • 487
  • 4
  • 9
  • You STILL have to keep track of all modules you use AND generate the HTML snippet with all the required ` – Szczepan Hołyszewski Aug 17 '23 at 09:00