node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

wintersmith-browserify

wintersmith-browserify

browserify plugin for wintersmith

Install

Using wintersmith:

wintersmith plugin install browserify

Manually:

npm install --save wintersmith-browserify

Then add wintersmith-browserify to your plugins list in wintersmith's config.json.

Options

Set as the browserify object in your wintersmith config.json.

Name Default Description
ignore [] files to ignore ["filename", ..]
transforms ["coffeeify"] list of transform modules to can be in the format [["module", {"some": "option"}], ..] to pass options to transforms
plugins [] list of browserify plugin modules, same format as transforms
requires [] per-file bundle.require() mapping - [{"filename": ["module", {name: "module", "expose": "exposed_name"}, ..]}, ..]
externals [] per-file bundle.external() mapping - [{"filename": ["module", ..]}, ..]
static [] list of files that will only be compiled once and cached in memory for subsequent requests - ["filename", ..]
extensions [".js", ".coffee"] list of file extensions for matching files - used for finding files in wintersmith and is passed on as the extensions option to browserify
fileGlob "**/*.*(extensions)" file matching glob - provides more powerful control over files matched, e.g. "my/files/*.js"
staticLibs [] static libraries added to separate bundle - for heavy dependencies that increase bundle times. you must include the static libs bundle for it to work, see below.
staticLibsFilename "scripts/libs.js" path where the static library bundle will be served. the bundle is also in the content tree as contents.browserifyLibs

See https://github.com/substack/node-browserify#usage for more details.

Example

A project with a heavy dependency can impact bundle times, you can move heavy dependencies out to a separate file that is bundled only once and then cached.

{
    "browserify": {
        "staticLibs": ["d3"],
        "staticLibsFilename": "js/libs.js"
    }
}

Or if you need more control, the same thing can be achieved using the externals, requires and static options.

{
    "browserify": {
        "transforms": [
            "reactify",
            "coffeeify"
        ],
        "extensions": [
            ".js",
            ".coffee",
            ".jsx"
        ],
        "externals": {
            "scripts/main.jsx": ["react"]
        },
        "requires": {
            "scripts/libs.js": ["react"]
        },
        "static": ["scripts/libs.js"]
    }
}
 
`wintersmith preview` output
 

first request 200 /scripts/main.js BrowserifyPlugin 1899ms 200 /scripts/libs.js BrowserifyPlugin 5299ms ..

second request 200 /scripts/libs.js BrowserifyPlugin 8ms 200 /scripts/main.js BrowserifyPlugin 50ms ..

 
 
Tips and Tricks
---------------
 
[Sometimes](https://github.com/jnordberg/wintersmith-browserify/issues/3) you
only want to browserify specific files or folders instead of all of a particular
file type. You can control exactly which files (and extension options) get
passed to browserify with the `extensions` option. Any file extension listed
here is matched by wintersmith and by browserify - for example, you can use
the `extensions` option with '.coffee' to require('./foo') and have it resolve
foo.coffee.
 
By default, the `fileGlob` parameter is simply built from the `extensions` list,
but you can manually set a fileGlob for even more control of the wintersmith
matching side. Keep in mind that the `extensions` option is left unchanged (and
is passed as an option to browserify).
 
 
##### FileGlob / Extensions Examples:
 
Only process 'filename.js.browserify' files using the `extensions` option:
"browserify": {
    "extensions": [
        ".js.browserify"
    ],
    ...
}
 
Only process .js files in (or under) the 'scripts/prod' folder using the `fileGlob` option:
"browserify": {
    "fileGlob": "scripts/prod/**/*js",
    ...
}
 
 
 
---
 
![browserify!](http://substack.net/images/browserify/browserify.png)