metalsmith-browserify

Metalsmith plugin to bundle JS with browserify

Usage no npm install needed!

<script type="module">
  import metalsmithBrowserify from 'https://cdn.skypack.dev/metalsmith-browserify';
</script>

README

metalsmith-browserify

npm version build status coverage status greenkeeper downloads

A metalsmith plugin to bundle javascript with browserify

This plugin allows you to bundle your javascript with browserify. Pass it the entry points it should bundle, and it will replace those files with the resulting bundle on build.

For support questions please use stack overflow or our slack channel. For browserify specific questions try their documentation.

Installation

$ npm install metalsmith-browserify

Options

You can pass options to metalsmith-browserify with the Javascript API or CLI. The options are:

  • entries: required. The entry points that need to be browserified. Accepts an array of strings.
  • browserifyOptions: optional. These options will be passed on to browserify. See this area of the browserify documentation for all available options. Note that it's possible to break stuff here, like overriding the entries or basedir, so use wisely.
  • suppressNotFoundError: optional. By default metalsmith-browserify will exit with an error if a file can't be found. Enabling this option will suppress that error.

entries

The entry points that should be browserified. So this metalsmith.json:

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-browserify": {
      "entries": [
        "index.js",
        "another.js"
      ]
    }
  }
}

Would browserify both ./src/index.js and ./src/another.js and output them as ./build/index.js and ./build/another.js respectively.

Note that if the entry path is nested, the paths may differ across operating systems. Make sure you're using the correct directory separators, or use node's path.join to make sure the path will work anywhere.

browserifyOptions

Use this to pass options to browserify. So this metalsmith.json:

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-browserify": {
      "entries": ["index.js"],
      "browserifyOptions": {
        "debug": true
      }
    }
  }
}

Would enable browserify's debug option and add a source map to the bundle.

suppressNotFoundError

metalsmith-browserify exits with an error if it can’t find an entry file. If you’re doing any kind of incremental builds via something like metalsmith-watch, this is problematic as you’re likely only rebuilding files that have changed. This flag allows you to suppress that error:

{
  "source": "src",
  "destination": "build",
  "plugins": {
    "metalsmith-browserify": {
      "entries": ["index.js"],
      "suppressNotFoundError": true
    }
  }
}

Note that when this option is turned on, if you're logging debug messages, you’ll still see a message denoting which files metalsmith-browserify cannot find.

Errors and debugging

If you're encountering problems you can use debug to enable verbose logging. To enable debug prefix your build command with DEBUG=metalsmith-browserify. So if you normally run metalsmith to build, use DEBUG=metalsmith-browserify metalsmith (on windows the syntax is slightly different).

License

MIT