Skip to content

Instantly share code, notes, and snippets.

@dperussina
Last active March 9, 2019 04:32
Show Gist options
  • Save dperussina/d156317db5d794c6593dfc07a9239495 to your computer and use it in GitHub Desktop.
Save dperussina/d156317db5d794c6593dfc07a9239495 to your computer and use it in GitHub Desktop.

The first thing we need to do is install node.js / Browserify.

Node JS Windows: https://nodejs.org/dist/v10.15.3/node-v10.15.3-x86.msi

Browserify: npm install -g browserify

Next lets setup our project...

  • /public/
  • /public/index.html
  • /public/js/main.js
  • /public/js/module.js
<!doctype html>
<html>
<head>
<title>This is the title of the webpage!</title>
</head>
<body>
<p>This is an example paragraph. Anything in the <strong>body</strong> tag will appear on the page, just like this <strong>p</strong> tag and its contents.</p>
</body>
<script src="bundle.js"></script><!-- This does not exist yet -->
</html>
var myModule = require('module');
myModule('Hello World');
module.exports = function(message){
alert(message);
};

So now we have:

  • /public/
  • /public/index.html
  • /public/js/main.js
  • /public/js/module.js

Next we need to create bundle.js, this is a bundle of main + module.

Browse to project dir:

  • cd ~/Project/public/js/
  • browserify main.js > bundle.js

The command browserify main.js > bundle.js compiles down main + all "requires" to a single script being bundle.js.. This bundle is the only file you will need to include in index.html Browserify will also throw errors related to JS errors, so its a nice preprocessor as well

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment