browserify tools

ZOU Bin edited this page Feb 23, 2016 · 37 revisions

This page lists various tools that either use browserify or add features to it.

Task runners

Compiling for Development

There are two main ways that people like to recompile browserify bundles automatically as the files change. One way is to generate bundles on the fly attached to an existing web server. Another way is to run a standalone command or module that will only watch for changes and write to disk with the latest output.

Web Server Tools

  • amok serves your bundles with live editing capabilities
  • appup launch apps that use an express main server and an optional restify api server and bundle with browserify
  • beefy a local development server designed to work with browserify which creates bundles on demand
  • bfydir is like beefy but different: you can run one server to bundle multiple *.js-files simultaneously (via watchify)
  • browserify-middleware host your bundles as middleware via express or connect
  • budo a local development server focused on incremental bundling and LiveReloading JS/CSS
  • connect-browserify provides yet another express/connect middleware for browserify which can rebuild a bundle automatically on source changes (uses watchify internally)
  • enchilada host your bundles as middleware via express or connect
  • sprockets-browserify Serve node modules though Sprockets using browserify

Standalone Tools

  • parcelify Output css or other bundles based on the browserify dependency graph.
  • refreshify is like watchify, but has desktop notifications and live-reload built in
  • watchify efficiently re-compile the bundle automatically when you edit files

Dynamic loader in the browser

  • browserify-loader2 A loader like requirejs to help you load browserify modules without bundling.

Compiler Pipeline

These tools fit somewhere into the pipeline of module-deps | insert-module-globals | browser-pack that browserify sets up internally or deal with module-deps json output or input directly. You can use these tools to build your own browserify more suited to your specific needs.

Bundle Tools

These tools accept a bundle file generated by browserify or browser-pack as input.

  • browser-unpack - create module-deps-formatted output from an existing bundle file
  • derequire - replace require() calls with _dereq_() so that bundles can be required by browserify or similar static analysis tools again. This module was used in browserify --standalone pre v5.
  • disc - visualise the module tree of browserify project bundles and track down bloat.
  • exorcist pull the source map found inside a stream into an external .js.map file
  • bundle-collapser - compress require paths for better minification i.e. require('some/long/path') => require(1)

Testing

  • karma-bro bundle test files via browserify when being run with karma
  • mochify TDD for browserified code with Mocha, PhantomJS and WebDriver
  • proxyquireify proxy browserify's require in order to override dependencies while testing
  • testling run testling-ci tests locally.
  • zuul run your test suite in many browsers without having them installed locally
  • smokestack do browserify test.js | smokestack; your tests will run locally, and you'll get console output in your terminal

Refactoring

  • browserify-ftw refactor requirejs AMD projects to work with browserify

Other tools

  • cartero full asset pipeline based on commonjs and browserify.
  • xcss plugin for browserify collects all require() calls which reference stylesheets and bundle them into a separate CSS bundle.
  • reduce-js a wrapper for browserify and watchify to work more gulpishly.

Plugins

  • css-modulesify: A browserify plugin to load CSS Modules. (Please note that this is still highly experimental.)

Transform Helpers