Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?

like image 787
Borja Avatar asked Mar 29 '18 18:03

Borja


People also ask

Can you use npm modules in browser?

If you simply want to test out some NPM modules right inside your browser without setting up an entire app, you can use Browserify in three simple steps to use NPM modules.

Can you use node packages in the browser?

Browserify is a command line NodeJS module that allows users to write and use already existing NodeJS modules that run on the browser.

Can you use npm on a website?

js as part of the base installation, and this means if you have Node. js installed then you should already have npm installed. If you don't have Node. js installed, you can get it on their website.


2 Answers

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> 
like image 90
Walty Yeung Avatar answered Oct 08 '22 17:10

Walty Yeung


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.

like image 35
Lucas Meine Avatar answered Oct 08 '22 16:10

Lucas Meine