Hello World for JavaScript with npm modules in the browser

Jeremy Keeshin
Jun 29, 2017 · 4 min read

Ok. So when I started writing JavaScript the world was a very simple place. You’d just open up a html file, write a JavaScript tag, and them boom — you are running JavaScript.

<script>
console.log(“Hello!”);
</script>

We’ll things have changed. I haven’t programmed JavaScript regularly in the last few years and I feel like a JavaScript Rip Van Winkle. All the rules have changed. And no one seems to agree on anything. It’s not even clear where to start.

I had really been wondering what the simple “hello world” setup was for this brave new world of JavaScript modules with npm, “require” and your new framework- or build-tool-of-the-month. For large projects, I understand there is a whole build process and toolset, and it makes sense to have that level of overhead for configuration. But what about for a simple project or for someone who just wants to try a simple npm module in the browser? It’s not actually clear at all which way to go or what tool to use and there really isn’t a standard.

Here’s a very simple “hello world” for npm modules in the browser. If there is a simpler or more straightforward, but usable way, that doesn’t require learning 20 different tools in depth, please let me know!


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>

main.js

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

npm command

$ npm install repeat-string

watchify command

$ watchify main.js -o simplebundle.js

Hope this helps!

Jeremy Keeshin

Blog Posts by Jeremy Keeshin (also at thekeesh.com)

Jeremy Keeshin

Written by

CEO and co-founder at @CodeHS // previously founded the Flipside

Jeremy Keeshin

Blog Posts by Jeremy Keeshin (also at thekeesh.com)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade