Cara Konfigurasi NodeJs & Babel

Node.js didesain agar dapat digunakan untuk membuat aplikasi berbasis javascript dalam skala kecil hingga skala besar.

Pada tutorial ini akan dibahas cara inisialisasi proyek atau langkah-langkah mempersiapkan suatu proyek berbasis Node.js yang menggunakan babel sehingga inisial proyek ini dapat kita gunakan sebagai template atau dapat digunakan berulang-ulang untuk pembuatan proyek-proyek node.js dikemudian hari.

Kita akan menggunakan Babel sebagai transcompiler agar bisa menggunakan fitur-fitur baru yang ada pada JavaScript.

Untuk itu pastikan node.js dan git sudah terinstal dengan benar pada komputer kamu.

Dan kode editor yang digunakan adalah VSCode, tapi kamu dipersilahkan untuk menggunakan kode editor lain atau jika mau install VSCode silahkan kunjungi link: code.visualstudio.com untuk mendapatkan installernya.

Inisialisasi Proyek NodeJs

Pada suatu aplikasi JavaScript dibutuhkan suatu tempat yang digunakan sebagai penyimpan source code dan konfigurasi aplikasi. Jika kedepannya kamu akan memiliki banyak proyek aplikasi maka diperlukan suatu tempat atau folder khusus yang akan berisikan folder proyek-proyek kamu yang nantinya kita bisa mengetahui lokasi proyek-proyek yang sudah di kerjakan dengan mudah.

Untuk membuat sebuah folder dengan nama nodejs-babel. Ketikan perintah berikut pada terminal / command prompt kamu:

mkdir nodejs-babel

cd nodejs-babel

Untuk membuat suatu proyek Node.js kita akan membuat meta data yang akan disimpan pada suatu file bernama package.json. File ini berisikan kumpulan informasi-informasi mengenai proyek yang sedang dibuat serta menginformasikan kepada npm (Node Package Manager) mengenai depedencies/module yang akan digunakan pada proyek.

Untuk membuat file package.json secara otomatis kita bisa menggunakan perintah inisialisasi nya npm, yaitu dengan cara:

npm init -y

Maka sebuah file package.json akan digenerate, file ini berisikan informasi default seperti nama proyek, versi, deskripsi dll.

Jika kamu mau merubah informasi default yang digenarate oleh npm kamu bisa mengeditnya langsung dengan kode editor atau VSCode.

Membuat File JavaScript

Pada folder nodejs-babel buatlah sebuah folder dengan nama src, folder itu akan kita gunakan untuk menyimpan source code aplikasi.

mkdir src

cd src

Kemudian didalam folder src buatlah sebuah file dengan nama index.js yang akan digunakan sebagai entry point atau sebagai file utama yang akan diakses oleh node.js untuk menjalankan aplikasi.

touch index.js

Kemudian bukalah folder nodejs-babel menggunakan kode editor, pada file src/index.js tuliskan script berikut.

console.log("Halo proyek node.js")

Lalu pada file package.json, tambahkan pengaturan "start": "node src/index.js" pada properti scripts. Sehingga file package.json akan terlihat sebagai berikut:

{
  "name": "nodejs-babel",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node src/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

Selanjutnya untuk menjalankan aplikasi ketikan perintah:

npm start

Maka akan terlihat output sebagai berikut:

Halo proyek node.js

Selamat, kamu sudah berhasil membuat aplikasi node.js pertama mu.

Tapi jika kita melakukan suatu perubahan pada file index.js, untuk menjalankan ulang aplikasi kita harus menghentikan aplikasi menggunakan ctrl + c dan npm start lagi. Tentu saja hal ini akan memperlambat kita dalam membangun aplikasi.

Untuk itu kita akan membuat aplikasi kita reload secara otomatis jika ada perubahan menggunakan library nodemon.

Untuk menginstal nya, ketikan perintah:

npm install nodemon --save-dev

Sekarang pada file package.json, ubahlah script start yang awalnya node src/index.js menjadi nodemon src/index.js

Silahkan coba lagi menjalankan apalikasi dengan npm start dan coba rubah script yang ada pada index.js menjadi:

console.log("Proyek node.js menggunakan nodemon")

Maka aplikasi akan reload secara otomatis dan menjalankan script yang baru.

Instalasi Babel

Untuk menggunakan fitur terbaru JavaScript seperti import / export pada versi node.js saat ini, kita membutuhkan babel sebagai transcompiler yang mengubah kodingan kita agar dapat dibaca dan dijalankan oleh node.js.

Untuk menginstallnya gunakan perintah:

npm install @babel/core @babel/node --save-dev

Kemudian pada package.json anda ubahlah script start menjadi: nodemon --exec babel-node src/index.js

Sekarang aplikasi node.js sudah berjalan menggunakan babel, tapi untuk menggunakan fitur-fitur terbaru pada JavaScript kita harus menambahkan babel preset atau babel plugin.

Pada projyek ini kita akan gunakan babel preset env, silahkan ketikan perintah berikut:

npm install @babel/preset-env --save-dev

Pada root proyek, buatlah sebuah file .babelrc untuk menyimpan pengaturan babel.

touch .babelrc

Kemudian kita tambahkan preset kedalam pengaturan babel:

{
  "presets": [
    "@babel/preset-env"
  ]
}

Menggunakan Environment Variable

Dalam membuat suatu aplikasi, biasanya kita akan membutuhkan beberapa informasi rahasia sebagai pengaturan aplikasi, dimana informasi tersebut tidak boleh ditampilkan pada kodingan. Contohnya seperti password, email, api-key dll. Maka untuk membuat environment variable, buatlah file .env pada root proyek:

touch .env

Pada file .env ketikan script berikut:

APP_SECRET=53cR37

Agar aplikasi node.js bisa membaca env variable, dibutuhkan dependencies dotenv. Untuk menginstalnya ketikan:

npm install dotenv --save

Sekarang aplikasi node.js kita sudah dapat membaca env variable. Untuk mencobanya tulis script berikut pada src/index.js:

import 'dotenv/config';

console.log('Proyek node.js menggunakan nodemon');
console.log(process.env.APP_SECRET);

Lalu jalankan aplikasi dengan npm start, dan kamu akan melihat hasil outputnya sebgai berikut:

Halo proyek node.js menggunakan nodemon
53cR37

Sekarang proyek node.js kita siap untuk dikembangkan!

Bonus: Sampai disini kita bisa mulai menggunakan version kontrol git untuk me-manage versi aplikasi. Kamu bisa memulai dengan sebuah inisial git, dengan perintah:

# inisialisasi git
git init
# menambahkan semua file ke stage
git add .
# commit pertama
git commit -m "inisialisasi basic app nodejs babel"

Pada panduan ini kamu sudah berhasil membuat sebuah basic konfigurasi proyek nodeJs. Dan kamu diharapkan juga mampu memahami beberapa konsep dasar, seperti:

Penggunaan npm init
Penggunaan npm install
Manfaat menggunakan nodemon untuk development
Kenapa menggunakan babel js?
Bagaimana cara kerja environment variable?

Untuk hasil akhir dari source kode bisa dilihat disini.