Bundle Vue library with Bili

EGOIST
EGOIST
Jan 4, 2018 · 2 min read

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.

EGOIST

Written by

EGOIST

I am GOD’S CHILD.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade