Bundle Vue library with Bili

Bili is a higher level bundler that uses Rollup under the hood, you can think of this tool as Poi / Parcel but for bundling libraries instead of apps. All configurations can be done via CLI flags as well as bili field in package.json .

Create a Vue plugin

First install Bili in your lovely project:

mkdir my-component && cd my-component
yarn init -y
yarn add bili --dev

Then create a simple index.js as the library entry:

export default Vue => {
  Vue.component('my-component', {
    render: h => h('h2', null, ['hello bili'])
  })
}

Finally you just need to run ./node_modules/.bin/bili index.js or yarn bili index.js to bundle this file:

Now your library is available as CommonJS format, it’s a Vue plugin which can install component my-component globally.

Next step, you may write Vue component in a standalone .vue file to benefit from Vue SFC, it’s possible with rollup-plugin-vue .

Change index.js to:

import Component from './MyComponent.vue'
export default Vue => Vue.component(Component.name, Component)

And move component code to ./MyComponent.vue :

<template>
  <h1>hello</h1>
</template>
<script>
export default {
  name: 'my-component'
}
</script>
<!-- let's add some style too :) -->
<style scoped>
h1 {
  color: red
}
</style>

Now install rollup-plugin-vue and run Bili:

yarn add rollup-plugin-vue vue-template-compiler --dev
yarn bili index.js --plugin vue

Vue file is properly compiled and CSS is extracted to its own file.

Bundle in multiple formats

You may need a UMD format bundle alongside the CommonJS format to let user use it directly in browser:

yarn bili index.js --plugin vue --format cjs,umd --moduleName MyComponent

Now it’s also available as window.MyComponent in ./dist/index.js .

Wrapping Up

Bili gives you superpowers of Rollup without any *initial* configurations, however if you want more customizations, Bili has a sane list of options.