MENU


Browserify

Alexa's Ranking: 379,461

Relying on the require() function to manage dependencies, Browserify is a relatively simpler assets bundler. To install it:


> npm i –g browserify terser> npm init -y> npm i browserify-css

For a demonstration, prepare the following files:

1) some source files in [project]/


// a.jsrequire('./b');

// b.jsrequire('./c');require('./d');var css=require('./style.css');console.log(css);

// c.jsconsole.log("C");

// d.jsconsole.log("D");

/* style.css */@import url("./styleA.css");@import url("./styleB.css");body {
    background-color: #fff;}

/* styleA.css */body { color:red; }

/* styleB.css */body { font-size: 30px; }

2) [project]/index.html


<!DOCTYPE html><html>
  <head>
    <title>My Browserify Project</title>
  </head>
  <body>
       No Development Server
    <script src="bundle.js"></script>
   </body></html>

To pack all 7 files in 1) into 1 bundle:


>browserify -t browserify-css a.js | terser --compress
                                                         --mangle > bundle.js

Then launch index.html with a browser:

As you can see, the CSS styles are applied dynamically by bundle.js (injection of a <style> tag into the <head> specifically).

Notice Browserify does not perform source mapping by default.