How to use npm modules in browser? is possible to use them even in local (PC) ? - javascript
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 ?
Answer
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.
- install everything required
npm install -g browserify
npm install emailjs-mime-parser
npm install buffer
- write a simple
main.jsas a wrapper:
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 main.js -o bundle.js
- now, you could use
bundle.jsinside the HTML file.
<html>
<head>
<script src='bundle.js'></script>
<script>
console.log(window.parseEmail);
console.log(window.Buffer);
</script>
<body>
</body>
</html>