Blog

A Simple Way to Use NPM Library in Browser


Occasionally, we need to use a JS library in our browser side, yet it's only available from the NPM repository.

As usual, the Google result of any NPM related questions will bring you more yes-and-no answers, and leave you in further confusions and headaches.

Well, life better be simpler 🙂

Say, we are going to use the NPM library of email-js-mime-parser and buffer in the browser, all we need to do is:

1. install browserify tool

npm install -g browserify

 

2. install npm libraries


npm install emailjs-mime-parser
npm install buffer

 

3. create a new JS file, main.js


var parse = require('emailjs-mime-parser').default
var Buffer = require('buffer').Buffer
global.window.parseEmail = parse
global.window.Buffer = Buffer

 

4. compile the main.js:

browserify main.js -o bundle.js

 

5. use bundle.js in normal webpage, and you could use parseEmail and Buffer in the browser side JS:


<html>
<head>
<script src='bundle.js'>
<script>
console.log(window.parseEmail);
console.log(window.Buffer);
</script>
<body>
</body>
</html>

 

(Note that default is needed for emailjs-mime-parser because of legacy export syntax.)

 

And that's all 🎆