PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Wednesday, August 24, 2022

[FIXED] How to use npm modules in browser? is possible to use them even in local (PC)?

 August 24, 2022     javascript, module, node.js, npm, npm-install     No comments   

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 - Cary Denson (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing