Webpack: Mengatur Paths Alias TypeScript

Pada saat menulis kode dalam bahasa pemrograman TypeScript maupun JavaScript yang berbasis modul, kita pasti sering melakukan importing modul. Pada umumnya cara melakukan importing adalah dengan cara relative paths, cara ini digunakan untuk menunjuk lokasi di mana modul yang akan di import. Contohnya seperti ini.

import ModiuleX from "../../../libraries/modulex.ts"Code language: TypeScript (typescript)

Cara tersebut sah-sah saja, akan tetapi bagaimana jika lokasi modul yang akan di-import tempatnya cukup dalam atau terlalu banyak folder, cara ini akan menyita banyak space pada baris import sehingga kurang baik ketika dibaca. Untuk mengatasi masalah ini, ada cara di TypeScript yaitu menggunakan paths alias dengan cara menambahkan properti paths di dalam file tsconfig.json seperti ini

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@comps/*": ["src/components/*"],
      "@libs/*": ["src/libraries/*"]
    }
  }
}Code language: JSON / JSON with Comments (json)

Dengan mengatur path alias seperti di atas, maka jika ingin meng-import modul yang ada di dalam folder src, components, dan libraries cukup dengan langsung arahkan ke path alias-nya. Contohnya seperti ini.

import ComponentA from "@libs/modulex.ts"Code language: TypeScript (typescript)

Dengan cara tersebut tidak perlu lagi mengetikan relative path secara panjang, cukup gunakan alias yang sebelumnya telah diatur. Namun tidak selesai di sana, masih ada hal yang perlu diatur, terutama jika kita menggunakan webpack, karena path alias yang diatur tidak secara otomatis akan terbaca oleh webpack. Alih-alih ter-bundle, tapi malah error karena webpack tidak bisa menemukan modul yang dimaksud.

Untuk mengatasi masalah ini, kita harus menambahkan konfigurasi lagi agar webpack dapat membaca lokasi sebenarnya dari path alias yang dibuat tadi. Cara teremudahnya adalah dengan menggunakan plugin bernama “tsconfig-paths-webpack-plugin”. Plugin ini mampu melakukan generate secara otomatis path yang diatur di dalam file tsconfig.json.

Instalasi Plugin

Pertama-tama install terlebih dahulu plugin “tsconfig-paths-webpack-plugin” dengan menggunakan command berikut.

// Jika menggunakan npm
npm i -D tsconfig-paths-webpack-plugin

// Jika menggunakan yarn
yarn add -D tsconfig-paths-webpack-plugin

// Jika menggunakan pnpm
pnpm i -D tsconfig-paths-webpack-pluginCode language: Bash (bash)

Mengatur Webpack

Setelah plugin ter-install, selanjutnya adalah mengatur konfigurasi webpack untuk menambahkan plugin. Caranya adalah import terlebih dahulu plugin yang ter-install lalu masukkan plugin ke dalam konfigurasi webpack-nya.

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  ...
  resolve: {
    plugins: [new TsconfigPathsPlugin()]
  }
  ...
}Code language: JavaScript (javascript)

Setelah itu, maka path alias yang telah ditambahkan melalui tsconfig.json akan otomatis ditambahkan juga di konfigurasi webpack sehingga pada saat bundling, webpack dapat membaca path asli dari alias yang dimaksud.

Untuk mengetahui lebih rinci terkait “tsconfig-paths-webpack-plugin”, kamu dapat membacanya di halaman resminya langsung di sini https://github.com/dividab/tsconfig-paths-webpack-plugin

Sekian artikel saya kali ini, semoga dapat membantu permasalahan yang ditemui, dan terima kasih. ?