browser-pack

What is browser-pack?

The browser-pack npm package is a tool used to bundle JavaScript files for use in the browser. It takes a stream of CommonJS modules and produces a single JavaScript file that can be included in a web page. This is particularly useful for front-end development where modular code needs to be combined into a single script.

What are browser-pack's main functionalities?

Bundling JavaScript Modules

This feature allows you to bundle multiple JavaScript modules into a single file. The code sample demonstrates how to use browser-pack to read a JSON file containing module definitions, bundle them, and write the output to a new file.

const pack = require('browser-pack');
const fs = require('fs');
const JSONStream = require('JSONStream');

const p = pack();
const input = fs.createReadStream('modules.json');
const output = fs.createWriteStream('bundle.js');

input.pipe(JSONStream.parse('*')).pipe(p).pipe(output);

Customizing Bundle Output

This feature allows you to customize the output of the bundle. The code sample shows how to use options like 'raw' and 'hasExports' to modify the behavior of the bundling process.

const pack = require('browser-pack');
const fs = require('fs');
const JSONStream = require('JSONStream');

const p = pack({ raw: true, hasExports: true });
const input = fs.createReadStream('modules.json');
const output = fs.createWriteStream('custom-bundle.js');

input.pipe(JSONStream.parse('*')).pipe(p).pipe(output);

Other packages similar to browser-pack

browserify

Browserify is a popular tool that also allows you to bundle JavaScript files for use in the browser. It provides a more comprehensive solution with a larger ecosystem of plugins and transforms. Compared to browser-pack, Browserify offers more features out of the box, such as support for various module formats and built-in source map generation.

webpack

Webpack is a powerful module bundler that can handle not just JavaScript but also CSS, images, and other assets. It offers advanced features like code splitting, hot module replacement, and tree shaking. While browser-pack focuses on bundling JavaScript modules, Webpack provides a more extensive and flexible solution for modern web development.

rollup

Rollup is a module bundler that specializes in optimizing ES6 modules. It produces smaller and more efficient bundles by leveraging tree shaking to remove unused code. Rollup is often preferred for library development due to its focus on ES6 modules and its ability to generate multiple output formats. Compared to browser-pack, Rollup offers more advanced optimizations and support for ES6 modules.

README

browser-pack

pack node-style source files from a json stream into a browser bundle

example

json input:

[
  {
    "id": "a1b5af78",
    "source": "console.log(require('./foo')(5))",
    "deps": { "./foo": "b8f69fa5" },
    "entry": true
  },
  {
    "id": "b8f69fa5",
    "source": "module.exports = function (n) { return n * 111 }",
    "deps": {}
  }
]

bundle script:

var pack = require('browser-pack')();
process.stdin.pipe(pack).pipe(process.stdout);
process.stdin.resume();

output:

$ browser-pack < input.json
(function(p,c,e){function r(n){if(!c[n]){c[n]={exports:{}};p[n][0](function(x){return r(p[n][1][x])},c[n],c[n].exports);}return c[n].exports}for(var i=0;i<e.length;i++)r(e[i]);return r})({"a1b5af78":[function(require,module,exports){console.log(require('./foo')(5))},{"./foo":"b8f69fa5"}],"b8f69fa5":[function(require,module,exports){module.exports = function (n) { return n * 111 }},{}]},{},["a1b5af78","b8f69fa5"])

methods

var pack = require('browser-pack');

pack(opts)

Return a through stream that takes a stream of json input and produces a stream of javascript output. This module does not export its internal require() function but you can prepend 'var require=' to the stream contents to get the require function. require() will return undefined when a module hasn't been defined to support splitting up modules across several bundles with custom fallback logic.

If opts.raw is given, the writable end of the stream will expect objects to be written to it instead of expecting a stream of json text it will need to parse.

If opts.sourceMapPrefix is given and source maps are computed, the opts.sourceMapPrefix string will be used instead of //#.

If opts.sourceRoot is given and source maps are computed, the root for the output source map will be defined. (default is no root)

Additionally, rows with a truthy entry may have an order field that determines the numeric index to execute the entries in.

You can specify a custom prelude with opts.prelude but you should really know what you're doing first. See the prelude.js file in this repo for the default prelude. If you specify a custom prelude, you must also specify a valid opts.preludePath to the prelude source file for sourcemaps to work.

opts.standalone external string name to use for umd

opts.standaloneModule sets the internal module name to export for standalone

opts.hasExports whether the bundle should include require= (or the opts.externalRequireName) so that require() is available outside the bundle

install

With npm, to get the library do:

npm install browser-pack

and to get the command-line tool do:

npm install -g browser-pack

license

MIT

Changelog

6.1.0 - 2018-03-30

• Add option to define source map root #74
• Use uglify-js@2 to minify prelude #87