Absolute Paths di Gatsby.js

Ketika kalian mengembangkan aplikasi menggunakan react, tidak jarang kita menemukan sebuah import seperti berikut import Button from "../../../components/Button"

Mungkin bagi anda ini bukan suatu masalah yang besar, tapi secara pribadi saya rasa merasa tidak nyaman melihat hal tersebut, dan pada artikel kali ini kita akan mencoba membuat import kita lebih readable dengan absolute path.

Kebanyakan bagi anda akan sering melihat import tersebut karena memang relative path merupakan cara kita melakukan import pada umumnya.

import Button from "./components/Button";

Dari kelihatannya memang sudah cukup bagus, tapi ketika kita ingin naik beberapa folder, kalian akan mendapatkan hasil seperti berikut.

import Button from "../../../components/Button";

Terlihat kurang elegan bukan?, Selain itu bayangkan jika kita memindahkan komponen tersebut ke folder yang berbeda, akan membuat pekerjaan kita semakin sulit bukan?

Kita akan mencoba agar membuat import kita dapat terlihat seperti berikut

import Button from "components/Button";

Jika kalian menggunakan react.js kalian bisa mengikuti dokumentasi berikut. react absolute import. Namun pada gatsby.js sudah terdapat plugin yang dapat membantu kita untuk melakukan setup ini cukup dengan menginstall plugin.

npm install --save-dev gatsby-plugin-root-import

atau

yarn add --dev gatsby-plugin-root-import

Untuk penggunaannya kita cukup menambahkan baris berikut pada file gatsby-config.js

module.exports = {
  plugins: ["gatsby-plugin-root-import"],
};

Jika kalian tidak menambahkan options maka secara default plugin ini akan secara otomatis menargetkan folder src kalian sehingga kita dapat melakukan import seperti berikut:

import Button from "src/components/Button";
// atau dapat juga lebih ringkas
import Button from "components/Button";

Options

Dengan menggunakan parameter options kita dapat membantu menargetkan folder sesuai keinginan kita, seperti contoh:

const path = require('path')

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-root-import`,
      options: {
        src: path.join(__dirname, "src"),
        assets: path.join(__dirname, "src/assets"),
        components: path.join(__dirname, "src/components"),
        hooks: path.join(__dirname, "src/hooks"),
    }
  ]
},

Sekarang kita dapat dengan mudah melakukan import seperti berikut

import { useRandomHooks } from "hooks/useRandomHooks";
import Button from "components/Button";
import SomeAssets from "assets/SomeAssets";

Untuk informasi lebih lanjut kalian bisa langsung kunjungi github gatsby-plugin-root-import.