You might already be familiar with Webpack. It's a great tool and a bastard when it comes to configuration. It's a beast! It's a daemon! It's one of those sons of bitches that you can't loose and that will hunt you down everywhere you go. Like a woman! Just look at the amount of configuration code that the vue-cli produces when used in combination with the webpack template. That is right down INSANE!!!
Although there's not much that can be done with woman, Webpack has received a shell that is finally making some sense! That shell is called POI and is created by a gentleman who goes by the name of Egoist. Let's take a closer look at what it does.
At first glance it is a simplified build tool. One that you would probably never look upon knowing what kind of power Webpack brings to the table. But if you look a bit closer it turns out it is just (easier said than done) a box around webpack configuring it to some standards using a set of predefined presets for the most common tasks. However, knowing what kind of a daemon sits in the guts of it, you'll be pleased to know that poking around that dragon is very much possible and easy at the same time.
So what does it look like to use it? First you need to know that Poi stems from the ashes of a slimming treatment of vue-cli. This means it will out-of-the-fricken-box work just perfect with Vue.js! All you need is a file that will bootstrap your application. Let's see the content of an index.js that does it.
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})And then the single-file-component App.vue
<template>
<h1>Hello, world!</h1>
</template>You can obviously put everything else in there (the <script> and <style> sections for example).
Now let's see how do we actually use Poi with that nice application. First of all you need to install Poi. For the sake of this oversimplified and butt-ugly example we'll perform the worst voodoo magic ever and install Poi globally. But please, beyond demonstration purposes NEVER EVER EVER EVER DO THAT. EVER. Poi is your build system so it must be part of your project. You have been warned!
npm install -g poiNow having index.js and App.vue in that same directory run the following command:
$ poi index.js
# some useless output here
Asset Size Chunks Chunk Names
abf8058814c81f7a160b.hot-update.json 44 bytes [emitted]
vendor.js 1.5 MB 0 [big] vendor
client.js 13.6 kB 1 client
manifest.js 31.2 kB 2 [emitted] manifest
ff42074b3ef0f4f41971.hot-update.json 35 bytes [emitted]
index.html 578 bytes [emitted]
> Open http://localhost:4000
> On Your Network: http://127.0.0.1:4000
DONE Build 664748 finished in 141 ms!That is it! Nothing more, nothing less! You have access to everything that you would expected: Hot module reloading, bundling app in separate files so that the part that actually changes is not the whole package, an index.html that is automatically generated for you to host your application - you name it!
There is much more to poi than just running the project. For example to be able to run unit tests you need to start using poi presets. That's not very hard - requires a few more packages though.
$ npm install poi-preset-karma karma-webpack karma-mocha karma-chai webpack mocha chaiWith those packages installed we need to make Poi aware how to run tests. We do that by creating a poi.config.js like so:
module.exports = {
presets: [
require('poi-preset-karma')({
frameworks: [ 'mocha', 'chai' ]
})
]
}That's really it! Nothing more! Just basically 4 lines telling that we would like to use karma with mocha and chai. Jeez! That is truly magnificent! Totally Vue.js-style! Now let's have the simplest test possible. All unit tests are to be stored in test/unit folder. This location can obviously be further configured but for now it will do just fine. So let's create test/unit/example.test.js like so:
import { expect } from 'chai'
it('will work', () => {
expect(1).to.equal(1)
})Having that in place let's run the tests!
$ poi test
# some useless output here
Asset Size Chunks Chunk Names
test/unit/example.test.js 925 kB 0 [emitted] [big] test/unit/example.test.js
DONE Build 78afa9 finished in 526 ms!
28 10 2017 13:22:30.310:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:5001/
28 10 2017 13:22:30.310:INFO [launcher]: Launching browser Chrome with unlimited concurrency
28 10 2017 13:22:30.314:INFO [launcher]: Starting browser Chrome
28 10 2017 13:22:30.892:INFO [Chrome 62.0.3202 (Linux 0.0.0)]: Connected on socket BUV....
✔ will work
Finished in 0.002 secs / 0 secs @ 13:22:31 GMT+0200 (CEST)
SUMMARY:
✔ 1 test completedNow ain't that a pretty! I myself was looking to simplify the use of webpack for quite some time and it is only my bad luck that I didn't run into poi sooner. I would have saved a whole lot of time! Tumbling down the rabbit hole if you would like to run those tests in headless mode you can specify the browser to use. I like headless Chrome:
$ poi test --browsers ChromeHeadlessBoooom! Your tests can now be executed in headless environments like CI! That is so easy and soooo exciting!
Want to do some code coverage?
$ poi test --coverage
# some useless output here
Asset Size Chunks Chunk Names
test/unit/example.test.js 925 kB 0 [emitted] [big] test/unit/example.test.js
DONE Build 78afa9 finished in 508 ms!
28 10 2017 13:46:33.489:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:5001/
28 10 2017 13:46:33.489:INFO [launcher]: Launching browser ChromeHeadless with unlimited concurrency
28 10 2017 13:46:33.493:INFO [launcher]: Starting browser ChromeHeadless
28 10 2017 13:46:33.747:INFO [HeadlessChrome 0.0.0 (Linux 0.0.0)]: Connected on socket 9Xjcc...
✔ will work
Finished in 0.006 secs / 0.001 secs @ 13:46:33 GMT+0200 (CEST)
SUMMARY:
✔ 1 test completed
----------|----------|----------|----------|----------|----------------|
File | % Stmts | % Branch | % Funcs | % Lines |Uncovered Lines |
----------|----------|----------|----------|----------|----------------|
----------|----------|----------|----------|----------|----------------|
All files | 100 | 100 | 100 | 100 | |
----------|----------|----------|----------|----------|----------------|So one last thing that we need is to deliver our super duper app to some hosting. scp-ing files is not the task for Poi but building those files is and Poi does it very well:
$ poi build index.jsYou will end up with the dist folder containing everything. One property of the created files is that they use absolute paths for resources like scripts and styles. It's great when it comes to hosting but trying it out using the file:// protocol (simply opening the index.html file in the browser) won't work. But it is very easy to fix. In poi.config.js add the webpack method like so:
module.exports = {
// ...
webpack(config) {
config.output.publicPath = ''
return config
}
}Now run the build again and open the resulting index.html file in the browser. Boom! It works!
There is way more to Poi than that. Check out the official documentation at http://poi.js.org and the GitHub page at http://github.com/egoist/poi. You will be amazed what's in store!
Happy... poi'ing!
