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:

Image for post

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
Image for post

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
Image for post

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.

Written by

I am GOD’S CHILD.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store