Bikin Project JavaScript (Webpack) dengan Poi

Yang udah pernah bikin project pake Webpack, Babel, dll. pasti setuju kalo initial setup-nya agak ribet. Kadang rasanya terlalu ribet kalo cuma untuk bikin project-2 kecil.

Ini ada tool namanya Poi yang bisa bantu setup Webpack dkk secara “otomatis”.

Kalo untuk project beneran saya masih lebih sreg pake manual setup. Utamanya karena saya kurang suka kalo ada tambahan layer lagi krn biasanya malah bikin susah. Tapi kalo untuk project kecil buat tutorial atau eksperimen, bolehlah pake Poi.

Instalasi

Karena tujuannya pake Poi buat bantu bikin project, baiknya instal secara global aja.

$ yarn global add poi
#atau
$ npm install -g poi

Demo Project

Coba bikin direktori baru buat project.

ES6

Bikin file src/index.js yg isinya skrip ES6.

const title = '<h1>Hello Poi</h1>';
document.getElementById('app').innerHTML = title;

Buka terminal, terus jalanin:

$ poi src/index.js

Hanya dengan satu baris perintah aja Poi :

  1. transpile skrip ES6 ke ES5
  2. bikin index.html & pake skrip output #1
  3. nyalain webpack dev server
  4. kopi url ke clipboard

Kita tinggal paste URL di browser & pencet Enter.

Itu semua tanpa kita donlod & seting macem-macem. Cukup jalanin poi.

Paket NPM

Kita juga bisa pake paket NPM (tentu yang suport browser), misalnya Moment.

Pertama install Moment pake yarn atau npm.

$ yarn add moment -S

#kalo belum ada package.json
$ yarn init -y && yarn add moment -S

Terus, ganti isi src/index.js:

import moment from 'moment';

const now = moment().format('dd MM YYYY');
const tomorrow = moment().add(1,'d').format('dd MM YYYY');
const content = `<p>Hari ini: ${now}, besok: ${tomorrow}</p>`;
document.getElementById('app').innerHTML = content;

Simpan file index.js. Liat browser, localhost:4000 otomatis reload. Hasilnya langsung updet:

CSS & SCSS

CSS/SCSS juga bisa langsung.

Custom index.html

Kalo kita buka file index.html yang di-generate oleh Poi, kita liat ada div#add. Jadi ini yang harus ada kalo kita bikin index.html sendiri.

Bikin file index.ejs di root directory yg isinya:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Poi Intro</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">        
    </head>
    <body>
        <h1>Hello Poi</h1>
        <div id="app"></div>
    </body>
</html>

Kenapa nama filenya index.ejs ? Karena Poi pake plugin webpack html-webpack-plugin yang secara default pake file index.ejs sebagai template.

Matiin Poi kalo lagi jalan & jalanin lagi. Terus reload localhost:4000.

React

Untuk bikin project ReactJS, instal dulu dependency-nya.

$ yarn add react react-dom babel-preset-react-app -E -S

Bikin file .babelrc di root:

{
    "presets":[
        "react-app"
    ]
}

Bikin file src/App.jsx yang isinya:

import React from 'react';
export default (props) => (
  <div>
    <h2>Poi-React</h2>
    <p>Hari ini {props.now}, besok: {props.tomorrow}  </p>
  </div>
)

Ganti isi src/index.js:

import './styles.scss';

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import moment from 'moment';

const now = moment().format('dd MM YYYY');
const tomorrow = moment().add(1,'d').format('dd MM YYYY');

ReactDOM.render(
  <App now={now} tomorrow={tomorrow} />, 
  document.getElementById('app')
);

Restart Poi, hasilnya:

Kalo mau bikin project VueJS atau Angular atau framework lain, tinggal instal dependency-nya aja. Sesuai sama framework yang dipake.

Production Build

Poi nyediain 4 perintah yang bisa kita pake:
1. poi : default cmd, jalanin webpack-dev-server
2. poi build : bikin production build
3. poi test : jalanin unit-test
4. poi watch : jalanin webpack dalam model watch (tanpa server, hanya compile)

Coba bikin production build:

$ poi build src/index.js

Hasilnya, Poi bikin bikin production file (minified + sourcemaps) di direktori ./dist.

Untuk jalanin production-build ini, kita perlu pake server sendiri. Yang paling gampang mungkin pake Webserver for Chrome atau kalo ada PHP, ya pake built-in servernya.

Saya ada PHP jadi di root project saya jalanin:

$ php -S localhost:9000 -t dist/

Hasilnya:

Penutup

Sekian artikel kali ini. Kapan-kapan disambung lagi dengan topik yang lain :). Insya Allah.

Untuk info lebih lanjut tentang Poi silakan baca sendiri di Dokumentasi Poi.

Also in this category ...


2 Comments

Comments are closed.