Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
browserify
Advanced tools
Browserify is a tool for Node.js that enables developers to use the require() function from Node in the browser. It bundles up all of your JavaScript files and dependencies into a single file that can be served to the browser. It allows for modular code in the client-side environment by leveraging the CommonJS module pattern.
Bundle modules for the browser
This feature allows you to bundle all your JavaScript files and dependencies into a single file. The code sample demonstrates how to create a bundle starting with 'main.js' and output it to 'bundle.js'.
const browserify = require('browserify');
const fs = require('fs');
let b = browserify();
b.add('main.js');
b.bundle().pipe(fs.createWriteStream('bundle.js'));
Transformations
Browserify can apply transformations to the files as they are added to the bundle. This is useful for tasks like compiling ES6 syntax to ES5 using Babel, as shown in the code sample.
const browserify = require('browserify');
const babelify = require('babelify');
browserify('./src/app.js')
.transform(babelify, { presets: ['@babel/preset-env'] })
.bundle()
.pipe(process.stdout);
Plugins
Browserify can be extended with plugins that can add additional functionality. In the code sample, the watchify plugin is used to automatically re-bundle the file whenever changes are detected.
const browserify = require('browserify');
const watchify = require('watchify');
const b = browserify('./src/app.js', { plugin: [watchify] });
b.on('update', bundle);
function bundle() {
b.bundle().pipe(fs.createWriteStream('bundle.js'));
}
Webpack is a powerful module bundler that can transform front-end assets like HTML, CSS, and images where Browserify is strictly for JavaScript. Webpack also has a larger plugin ecosystem and can split bundles more efficiently.
Parcel is a web application bundler that offers a zero-configuration setup. It is faster than Browserify due to its multi-core processing capability and it also handles a variety of assets like HTML, CSS, and images out of the box.
Rollup is a module bundler for JavaScript which uses the new standardized format for code modules included in the ES6 revision. It is known for its efficient bundling, as it generates a smaller bundle by eliminating unused code (tree shaking).
Browser-side require() for your node modules and npm packages
server.js
var connect = require('connect');
var server = connect.createServer();
server.use(connect.staticProvider(__dirname));
server.use(require('browserify')({
base : __dirname + '/js',
mount : '/browserify.js',
}));
server.listen(9797);
console.log('Listening on 9797...');
js/foo.js
var bar = require('./bar');
module.exports = function (x) {
return x * bar.coeff(x)
};
js/bar.js
exports.coeff = function (x) {
return Math.log(x) / Math.log(2) + 1;
};
index.html
<html>
<head>
<script type="text/javascript" src="/browserify.js"></script>
<script type="text/javascript">
var foo = require('./foo');
window.onload = function () {
document.getElementById('result').innerHTML = foo(100);
};
</script>
</head>
<body>
foo =
<span style='font-family: monospace' id="result"></span>
</body>
</html>
server.js
var connect = require('connect');
var server = connect.createServer();
server.use(connect.staticProvider(__dirname));
server.use(require('browserify')({
mount : '/browserify.js',
require : [ 'traverse' ],
}));
server.listen(4040);
console.log('Listening on 4040...');
<html>
<head>
<script type="text/javascript" src="/browserify.js"></script>
<script type="text/javascript">
var Traverse = require('traverse');
var obj = [ 5, 6, -3, [ 7, 8, -2, 1 ], { f : 10, g : -13 } ];
var fixed = Traverse(obj)
.modify(function (x) {
if (x < 0) this.update(x + 128);
})
.get()
;
window.onload = function () {
document.getElementById('result').innerHTML
= JSON.stringify(fixed);
};
</script>
</head>
<body>
foo =
<span style='font-family: monospace' id="result"></span>
</body>
</html>
FAQs
browser-side require() the node way
The npm package browserify receives a total of 1,191,669 weekly downloads. As such, browserify popularity was classified as popular.
We found that browserify demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 40 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.