bundle-js

Batteries-included, minimal-configuration JS bundler

A hypothetical JavaScript bundler. bundle-js aims to be your one-stop-shop for everything in the JS frontend. Goals:

• Batteries-included: you should be able to use bundle-js without any plugins or any fancy configuration.
• Convention over configuration: there should be little need to configure bundle-js.
• One dependency: no more dealing with webpack, loaders, babel, babel presets, babel plugins, and so on!
• Extensible: it should still be possible to extend functionality if necessary.

Powered by Rollup + Buble.

Usage

CLI usage: You can easily bundle up code with the CLI. This will also transpile all ES2015+, React, and so on. The final output will be a Common.js bundle.

bundle-js index.js -o bundle.js
# gives you bundle.js and bundle.js.map

JS usage: You can use it programmatically.

const bundle = require('bundle-js')

// one pass
bundle('index.js')
.then(result => {
  result.code
  result.map
})

Usage in Node.js

bundle-js lets you write ES6 in Node, as well. (This seems like out of scope, but still within "your one stop shop for es6" territory!)

This transpiles everything in src/ to lib/:

bundle-js --no-bundle src lib

Default features

• ES2015! (rollup-plugin-buble)
• Useful ESnext extras, like {...spread}
• React JSX
• CommonJS support (rollup-plugin-commonjs)
• Compression with --compress (rollup-plugin-uglifyjs)

Configuration

These CLI flags are available:

Bundle options: (rollup)
  -f, --format cjs         bundle as a CommonJS module
  -f, --format amd         bundle as an AMD module
  -f, --format umd         bundle as a UMD bundle (for browsers)
      --module-name NAME   name of the module

  -u, --umd NAME           same as `--format umd --module-name NAME`

      --compress           compress final output
      --no-bundle          transpile only (don't bundle)

Transpilation options: (buble)
      --jsx PRAGMA         pragma
      --target BROWSERS    target certain browsers (--target [ --chrome 48 --firefox 21 ])

Other options:
      --watch              run continuously and rebuild on any changes

You can also add them to package.json. These configuration is the same as the CLI config.

/* package.json */
"bundle-js": {
  // some options are passed onto buble
  "jsx": "decca.element",
  "target": { "chrome": 48 },

  // some options are passed onto rollup
  "globals": {
    "backbone": "Backbone"
  }
}

Plugins

This is a bad idea. Leaky abstractions ahead.

Rollup plugins are used automatically. Just add them to package.json.

npm install --save-dev rollup-plugin-json

Ideal packages to use:

• rollup-plugin-json - load json
• rollup-plugin-node-globals - support for process
• rollup-plugin-css-module - CSS modules support
• rollup-plugin-es3 - output legacy browser compatible code
• rollup-plugin-alias - aliases

You can configure them like so (thoough there's no need to for most plugins):

/* package.json */
"bundle-js": {
  "rollup-plugin-alias": {
    "left": "./right"
  }
}

Ejecting

Graduating from bundle-js? Drop down an abstraction level. This creates rollup-config.js with the appropriate rollup configuration.

bundle-js --eject > rollup-config.js

See example output

// Instructions:
//
// 1. Save this file as rollup.config.js.
// 2. Change your npm packages (see below).
//
//    npm uninstall --save bundle-js
//    npm install --save rollup buble rollup-plugin-buble rollup-plugin-commonjs
//
// 3. Run rollup:
//
//     ./node_modules/.bin/rollup -c rollup-config.js input.js -o output.js

import buble from 'rollup-plugin-buble'
import cjs from 'rollup-plugin-commonjs'

const bubleOptions = {
  target: { chrome: 24 }
}

export default {
  entry: 'index.js',
  format: 'cjs',
  plugins: [ cjs(), buble(bubleOptions) ]
}