atomify-js is a tool that makes it easy to create small, atomic modules of client-side code. It provides support for several templating libraries and Browserify transforms out of the box while allowing for ample customization. It also provides several convenience features to make working with Browserify even easier.
- Default transforms and template support
npm install atomify-js
- envify - Replace Node-style environment variables with plain strings
- ejsify - Provides support for EJS templates
- hbsfy - Provides support for Handlebars templates
- jadeify - Provides support for Jade templates
- partialify - Useful for templating with regular HTML files e.g. Angular
- brfs -
fs.readFileSync()static asset inliner
- reactify React's JSX support, with limited es6 functionality in
In its default form, atomify-js takes an
opts object and a
Path or paths that will be provided to Browserify as entry points. For convenience, you may simply provide a string or array of strings in place of the
opts object, which will be treated as the
entries property, respectively. Paths will be resolved relative to
If you have multiple entries, you can set this to
true to enable factor-bundle, which will take the common dependencies of all entries and move them to a common bundle. If you use this option, the api changes a little bit.
If using a callback, you're passed an object that with keys of each entry file and values of the compiled JS file. You'll also have a
var js = require'atomify-js'path = require'path'jsentries pathjoin__dirname 'entry1.js' pathjoin__dirname 'entry2.js'common: trueconsole.logentries'entry1'toStringconsole.logentries'entry2'toStringconsole.logentries'common'toString
If piping the response, you'll be pipped the common bundle. You'll need to listen to the
'entry' event to get the compiled entry files.
var js = require'atomify-js'path = require'path'jsentries pathjoin__dirname 'entry1.js' pathjoin__dirname 'entry2.js'common: truepipecommonStreamjsemitteron'entry'console.logbundleName contenttoString
If you simply want your bundle written out to a file, provide the path in this property. Path will be resolved relative to
Passed to Browserify to generate source maps if
true. Also provides additional CLI output, if applicable.
true, minifies source code and sets debug to true. If object, passed as options to minifyify and sets debug to true. If
false, no minification.
true, watchify will be used to create a file watcher and speed up subsequent builds.
If truthy, will use browserify-incremental to cache the result of a build. This can give you dramatically faster build times if you're not using
opts.cache is a string, it will be used as the file path to save the cache file to.
opts.watch are incompatible. An error will be thrown if you set both.
Provide your own transforms that will be added to the defaults listed above.
Browserify global transforms that will process all files used in your application, including those within
node_modules. You should take great care when defining global transforms as noted in the Browserify documentation.
Array of files to pass to Browserify's
Array of files to pass to Browserify's
One of the challenges with writing truly modular code is that your templates often refer to assets that need to be accessible from your final bundle. Configuring this option solves that problem by detecting asset paths in your templates, copying them to a new location, and rewriting the references to them to use the new paths. Paths in the
src attribute of
audio tags will be processed according to your configuration.
The processing is configured using two sub-properties of opts.assets:
dest field determines the location files will be copied to, relative to
prefix specifies what will be prepended to the new file names in the rewritten
src attributes. The filenames are generated from a hash of the assets themselves, so you don't have to worry about name collisions.
To demonstrate, see the following example.
// configentry: './entry.js'output: 'dist/bundle.js'assets:dest: 'dist/assets'prefix: 'assets/'
and a copy of logo.png will now exist at
You may also provide any valid browserify bundle options in the
opts object as well, and they will be passed directly to Browserify.
Standard Browserify bundle callback with
cb(err, src) signature. Not called if
opts.output is specifed. If
callback is provided as a string rather than function reference it will be used as the
opts.output file path.
opts.watch is truthy, the callback will be called on every file change
emitter property will emit events.
var js = require'atomify-js'js'./entry.js' './bundle.js'jsemitteron'browserify'console.logb
When the browserify instance is created, emits it. This might be useful to you, but it's really just for testing.
When the watchify instance is created, emits it. This might be useful to you, but it's really just for testing.
Emitted when watchify detects a file change. Passes the bundle id that changed.
opts.watch is truthy, this is emitted when the bundle changes.
time is the re-compilation time.
Proxies the package event from browserify.
opts.common is truthy, this will be emitted when an entry file is bundled.
entryBundle is the contents of the entry file in buffer form.
entryName is the file name of the original entry file.
// entry.jsvar thing = require'thing'template = require'./template.html.hbs'templateparam: 'param'
// build.jsvar js = require'atomify-js'var opts =entry: './entry.js'debug: true // default: `false`jsopts// do something with the src
var js = require'atomify-js'js'./entry.js' './bundle.js'
Tests can be run with
npm test. You can run the tests on every file change with
npm run tdd.