wintersmith-browserify v1.3.0

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.

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)