Browserify is a tool that brings node.js style development to the browser.
The thing you can see on the node.js cmd line can also be broung up to the broswer.
What you need to do is:
Install the browserify:
npm install -g browserify
Now, for example, you have two javascript file:
entry.js:
/** * Created by Answer1215 on 12/10/2014. */ var test = require('./test'); console.log(test);
test.js:
/** * Created by Answer1215 on 12/10/2014. */ module.exports = ['foo', 'bar', 'tool'];
When you run in the commond line: npm entry.js
you will get the result:
C:UsersAnswer1215WebstormProjectsangularcommonJSBroswerfiy>node entry [ 'foo', 'bar', 'tool' ]
But if you run browserfiy:
browserfiy entry.js -o bundle.js
It will create a new file which called bundle.js which minfiy the code, it looks like:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ /** * Created by Answer1215 on 12/10/2014. */ var test = require('./test'); console.log(test); },{"./test":2}],2:[function(require,module,exports){ /** * Created by Answer1215 on 12/10/2014. */ module.exports = ['foo', 'bar', 'tool']; },{}]},{},[1]);
Then you can create an html file whcih inclide the bundle.js:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src="bundle.js"></script> </body> </html>
Check in the broswer:
