Bubleup NPM | npm.io

tl;dr

$ bubleup
# is the same as
$ bubleup src/index.js --out-dir dist

# watch mode
$ bubleup --watch

Why is this useful?

I always repeat the same configurations for bundling my front-end libraries. With Bubleup you can simply run bubleup to generate commonjs-format code and or append --format umd to generate umd-format code, and it's fast! You can even pass --compress to generate compressed file and sourcemap.

Install

$ npm install -g bubleup

Usage

The buble guide: https://buble.surge.sh/guide

You can specific options in command-line:

$ bubleup src/index.js -d output

For full CLI usage please run bubleup -h, It's hard to describe some nested options in command line, so you can also configure them in package.js, eg:

{
  "bubleup": {
    "entry": "./path/to/my-entry.js"
  }
}

name

The filename of bundled files, the default value is package name in package.json. If no package.json was found, fallback to index.

$ bubleup --name redux --format umd --format cjs
# generate ./dist/redux.js ./dist/redux.common.js

format

Specific the bundle format, it could be a string like 'umd' or multiple targets ['umd', 'cjs'], it's useful if you want to support multiple standards. Default value is ['cjs'].

You should specfic a moduleName if you target umd, otherwise fallback to name.

{
  "bubleup": {
    "format": ["cjs", "umd"]
  }
}

compress

Enable this option to generate an extra compressed file for the UMD bundle, and sourcemap.

{
  "bubleup": {
    "format": "umd",
    "compress": true
  }
}
// generates: [name].js [name].min.js [name].min.js.map

async

Transform async/await to generator function, defaults to true.

alias

This is some feature which is similar to Webpack's alias, eg:

{
  "bubleup": {
    "alias": {
      "controllers": "./src/controllers"
    }
  }
}

paths

This helps you import some file from the CDN (as using AMD), or set an alias to an external file, see more details in Rollup's WIKI.

transforms

Apply custom transform rules to buble options:

{
  "bubleup": {
    "transforms": {
      "dangerousForOf": false
    }
  }
}

target

Compile targets, eg:

{
  "bubleup": {
    "target": {"chrome": 48, "firefox": 44, "node": 4}
  }
}

jsx

Buble supports JSX, and you can specfic a custom JSX pragma:

{
  "bubleup": {
    "jsx": "createElement"
  }
}

map

Generate soucemaps for cjs and umd builds, note that --compress will always generate sourcemaps for .min.js file:

{
  "bubleup": {
    "map": true
  }
}

watch

Run Rollup in watch mode, which means you will have faster incremental builds.

API

import bubleup from 'bubleup'

bubleup(options).catch(err => {
  if (err.snippet) {
    // display the actual error snippet
    console.error(err.snippet)
  }
  console.error(err.stack)
})