How to use npm modules in browser? is possible to use them even in local (PC) ? – javascript

Issue

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 ?

Solution

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>

Answered By – Walty Yeung

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.