Experience in using Poi.js and Bili from Egoist

Random image from pexels.com

BeforeAll () => {}

I have built a library called Vue-Ionicons from along time ago, this library is Vue component that generated from SVGs set in ionicons project by ionic-team. For generating Vue component, I use FileSystem API in Node.js to reading SVG file by file in ionicons project.

From along time ago I decide to deliver this library with non-transpiled file in .vue extension, and for demo page using webpack v3.10.0 with huge configuration to transpile Vue project into browser friendly file.

Describe (‘Upgrade all things’)

A moment ago, I need to use this Vue-Ionicons library in my newest project but should in transpiled file. Honestly this library is already not maintained for many months, and after I check the code there are many outdated dependencies in package.json. Some of them are babel 6 and webpack 3.

So, this is the time for greening the dependencies…

Test (‘poi should easier to use‘) => {}

First thing that I want to do is upgrade all dependencies into newest one, and upgrade webpack v.3 into v.4 with already have many lines of code in it is not task that I want to do. Instead of upgrade webpack, I decide to switch from webpack into Poi.js.

Think about it! (https://imgflip.com)

Before this project, I already playing with Poi.js in this project, in my opinion Poi.js is very good and easy to use. Have same power with webpack but coming with simpler config.

Can you imagine I already success bundling a full Vue project with just this below configuration:

Test (‘rollup should transpile .vue file‘) => {}

After already migrate webpack into Poi.js, I need to transpile at least 696 file .vue into file .js in as simple as I can. First tools that I think can doing this task is Rollup.js. The problem is I have no experience using Rollup to bundling multiple file. Also at least I need to add some plugins to success transpiled file .vue, like in this below configuration:

If I need to generating files from multiple entry then I need to export default as Array of same configs with different input and output definition for each files.

I think that’s too much for me..

Test (‘bili should easier‘) => {}

After searching in the jungle, I found that EGOIST also creating Poi.js like library but for Rollup called Bili. Like Poi.js, Bili was also coming with simpler configuration (almost zero in many cases) but with same power with Rollup for bundling library.

And I can transpiled 696 file .vue into file .js with just this below configuration:

And let the magic happen…

AfterAll () => {}

This article is my thanks to EGOIST for creating many-many amazing open-source library.

Sure, if I have time I will rewrite all my library using these two amazing bundler. But if the world is going okay, I will not rewrite it 😂.


Links:

  1. Poi.js (https://poi.js.org/)
  2. Bili (https://bili.egoist.sh/#/)
  3. Webpack (https://webpack.js.org/)
  4. Rollup (https://rollupjs.org/guide/en)
  5. Vue-Ionicons (https://github.com/mazipan/vue-ionicons)
 

Irfan Maulana

Seorang pengembang web antar muka dengan pengalaman lebih dari 5 tahun di beberapa perusahaan. Pengetahuan saya meliputi HTML, CSS, dan JavaScript. Saya juga memiliki beberapa projek open source yang bisa kalian lihat di Github saya @mazipan. Selalu senang hati bisa berbagi pengetahuan dan pengalaman dengan teman-teman.