JavaScript the New Way

The new way of writing JavaScript is to install modules from npm, write your JavaScript with those modules, and bundle those up into a new JavaScript files that you include with a script tag. You'll need a few extra tools.


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

The New Way

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.

    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>

What This Page Looks Like

Include the script tag generated by the build tool.

<!-- Include a bundle which was generated. -->
<script src="bundle.js"></script>

See the Old Way

See the Code for this Page