bili

bili transpiles ESnext code
with the power of Rollup and Buble.

tl;dr

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

# watch mode
$ bili --watch

Table of Contents

• Why is this useful?
• Install
• Usage
  • name
  • format
  • compress
  • alias
  • paths
  • transforms
  • target
  • jsx
  • map
  • watch
• API
• License

Why is this useful?

I always repeat the same configurations for bundling my front-end libraries. With bili you can simply run bili 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 bili

Usage

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

You can specific options in command-line:

$ bili src/index.js -d output

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

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

And you can also put the configs in package.json under key bili. To go even further, if you need the power of javascript, use bili.config.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.

$ bili --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.

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

compress

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

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

async

Transform async/await to generator function, defaults to true. This is using async-to-gen, so it has nothing to do with buble.

alias

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

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

jsCompiler

Use a custom js compiler instead of buble, it should a rollup plugin, like rollup-plugin-babel:

// bili.config.js
const babel = require('rollup-plugin-babel')

module.exports = {
  jsCompiler: babel({
    preset: [
      ['es2015', {modules: false}]
    ]
  })
}

replace

Add options to rollup-plugin-replace:

{
  "replace": {
    "VERSION": "0.0.1"
  }
}

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.

map

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

{
  "map": true
}

watch

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

buble.transforms

Apply custom transform rules to buble options:

{
  "buble": {
    "transforms": {
      "dangerousForOf": false
    }
  }
}

buble.jsx

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

{
  "buble": {
    "jsx": "createElement"
  }
}

target

Compile targets for buble, eg:

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

API

import bili from 'bili'

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

License

MIT © EGOIST