Hello World for JavaScript with npm modules in the browser

The Old Way

When I refer to the “old way” and the “new way,” I mean them in a bit of a hand-wavy way. I’m not referring to the “new-new way” — like ES6 — more just the “new way” meaning using npm modules.

The old way was just to include script tags for your scripts or other JavaScript files or dependencies you had. Like this:

<!-- Include an external javascript library like jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

<!-- Include a simple javascript file and it just runs. -->
<script src="oldway.js"></script>

You’d just write the JavaScript and it would run. What you wrote in a JavaScript file wouldn’t need to be transformed to just work. This works pretty well, but then as projects grow in complexity and dependencies it starts to get very tangled.

Here’s a web page with a sample of the old way.

The New Way

The “new way” refers here to using npm packages, and then using them in the browser. There is a lot of lingo here — npm is a package manager for Node.js. Node.js lets you run JavaScript on a server — or somewhere else outside the browser. npm was created in 2010 and now tons of modules, right now over 475,000. That’s part of why using npm now is amazing, you can bring in amazing tools and utilities from the broader JavaScript ecosystem in a very modular way.

The issue is that it’s a bit confusing to get started. And there are a lot of strong and conflicting opinions on the right or best way to do things.

But say you want to start using npm modules in the browser, where do you start?

You’ll need a few things to get started. Here’s what I’ve found so far as the easiest setup to get started.

Prerequisites

You’ll need to install Node.js and npm. Download here

Check that worked by running npm and making sure it actually prints something out.

Install browserify with npm install -g browserify

Install watchify with npm install -g watchify

Hello World for npm modules in the browser

Step 1: Make sure prerequisites are installed, or install them if they are not.

Step 2: Set up your directory with npm init.

npm init

Step 3: Install any npm modules you’d like to use. In this example I used two modules.

npm install --save arithmetic
npm install --save repeat-string

Step 4: Write your JavaScript. You can include these files by “requiring” them at the top. I’m writing these in a file called “newway.js”

var arithmetic = require('arithmetic');
arithmetic.add(2, 4);

Step 5: Bundle your JavaScript. You can do this with a tool like browserify, which takes your JavaScript, and the dependency modules, and puts them into one file.

browserify newway.js -o bundle.js

If you use browserify like this, you’ll have to make a new bundle every time you make a change. To make it a bit easier, you can run this watchify command, which will create your new bundle every time you save your file.

watchify newway.js -o bundle.js

Step 6: Now you include a script tag with bundle.js

<script src="bundle.js"></script>

So it is a bit more steps and a few more tools — and much harder to get initially set up, but once you are familiar there is lots of good stuff there.

Here’s a web page with a sample of the new way.

Here is the full HTML file: https://github.com/jkeesh/hello-browser-npm/blob/master/newway.html
Here is the full JS file: https://github.com/jkeesh/hello-browser-npm/blob/master/newway.js

Here’s the code for the repo with these examples: https://github.com/jkeesh/hello-browser-npm

Here’s one more sample simple setup:

index.html

<h1>Simple Web Page</h1>

<script src=”simplebundle.js”></script>

main.js

var repeat = require(‘repeat-string’);

console.log(repeat(‘hey’, 100));
document.write(repeat(‘hey’, 10));

npm command

$ npm install repeat-string

watchify command

$ watchify main.js -o simplebundle.js

Hope this helps!