Dibuat:2026-03-31Terakhir diperbarui:2026-05-31

    Terjemahkan situs web Vanilla JS Anda menggunakan Intlayer | Internasionalisasi (i18n)

    Daftar Isi

    Mengapa Intlayer dibandingkan alternatif?

    Dibandingkan dengan solusi utama seperti i18next atau i18n.js, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:

    Intlayer dioptimalkan agar berfungsi sempurna dengan Vanilla JavaScript dengan menawarkan manajemen konten tanpa kerangka kerja, dukungan TypeScript, dan semua fitur yang diperlukan untuk meningkatkan internasionalisasi (i18n).

    Daripada memuat file JSON berukuran besar ke halaman Anda, muat saja konten yang diperlukan. Intlayer membantu mengurangi ukuran bundle dan halaman Anda hingga 50%.

    Mencakup konten aplikasi Anda memfasilitasi pemeliharaan untuk aplikasi berskala besar. Anda dapat menduplikasi atau menghapus satu folder fitur tanpa beban mental untuk meninjau seluruh basis kode konten Anda. Selain itu, Intlayer diketik sepenuhnya untuk memastikan keakuratan konten Anda.

    Menempatkan konten bersama mengurangi konteks yang diperlukan dengan Model Bahasa Besar (LLM). Intlayer juga dilengkapi dengan serangkaian alat, seperti CLI untuk menguji terjemahan yang hilang,LSP, MCP, dan agent skill, untuk menjadikan pengalaman pengembang (DX) lebih lancar bagi agen AI.

    Gunakan otomatisasi untuk menerjemahkan dalam saluran CI/CD Anda menggunakan LLM pilihan Anda dengan biaya penyedia AI Anda. Intlayer juga menawarkan compiler untuk mengotomatiskan ekstraksi konten, serta platform web untuk membantu menerjemahkan di latar belakang.

    Menghubungkan file JSON berukuran besar ke komponen dapat menyebabkan masalah kinerja dan reaktivitas. Intlayer mengoptimalkan pemuatan konten Anda pada waktu pembuatan.

    Lebih dari sekedar solusi i18n, Intlayer menyediakan editor visual yang dihosting sendiri dan CMS lengkap untuk membantu Anda mengelola konten multibahasa secara real-time, membuat kolaborasi dengan penerjemah, copywriter, dan anggota tim lainnya menjadi lancar. Konten dapat disimpan secara lokal dan/atau jarak jauh.

    Panduan Langkah demi Langkah untuk Menyiapkan Intlayer dalam Aplikasi Vanilla JS

    1. Instal Dependensi

      Instal paket-paket yang diperlukan menggunakan npm:

      # Hasilkan bundel mandiri dari intlayer dan vanilla-intlayer
# File ini akan diimpor ke dalam file HTML Anda
npx intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js

# Inisialisasi intlayer dengan file konfigurasi
npx intlayer init --no-gitignore

# Bangun kamus
npx intlayer build
      # Hasilkan bundel mandiri dari intlayer dan vanilla-intlayer
# File ini akan diimpor ke dalam file HTML Anda
pnpm intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js

# Inisialisasi intlayer dengan file konfigurasi
pnpm intlayer init --no-gitignore

# Bangun kamus
pnpm intlayer build
      # Hasilkan bundel mandiri dari intlayer dan vanilla-intlayer
# File ini akan diimpor ke dalam file HTML Anda
yarn intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js

# Inisialisasi file konfigurasi intlayer, TypeScript jika sudah disiapkan, variabel lingkungan
yarn intlayer init --no-gitignore

# Bangun kamus
yarn intlayer build
      # Hasilkan bundel mandiri dari intlayer dan vanilla-intlayer
# File ini akan diimpor ke dalam file HTML Anda
bun x intlayer standalone --packages intlayer vanilla-intlayer --outfile intlayer.js

# Inisialisasi intlayer dengan file konfigurasi
bun x intlayer init --no-gitignore

# Bangun kamus
bun x intlayer build

      • intlayer Paket inti yang menyediakan alat internasionalisasi untuk manajemen konfigurasi, terjemahan, deklarasi konten, transpilisasi, dan perintah CLI.

      • vanilla-intlayer Paket yang mengintegrasikan Intlayer dengan aplikasi JavaScript / TypeScript murni. Paket ini menyediakan singleton pub/sub (IntlayerClient) dan pembantu berbasis callback (useIntlayer, useLocale, dsb.) sehingga bagian mana pun dari aplikasi Anda dapat bereaksi terhadap perubahan bahasa tanpa bergantung pada kerangka kerja UI.

      Ekspor penggabungan (bundling) dari CLI intlayer standalone menghasilkan build yang dioptimalkan melalui pemusnahan kode mati (tree-shaking) untuk paket, lokal, dan logika non-esensial (seperti pengalihan atau awalan) yang tidak digunakan khusus untuk konfigurasi Anda.

    2. Konfigurasi Proyek Anda

      Buat file konfigurasi untuk mengatur bahasa aplikasi Anda:

      import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Bahasa lainnya
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;
      Melalui file konfigurasi ini, Anda dapat mengatur URL yang dilokalkan, pengalihan middleware, nama cookie, lokasi dan ekstensi deklarasi konten Anda, menonaktifkan log Intlayer di konsol, dan banyak lagi. Untuk daftar parameter lengkap yang tersedia, lihat dokumentasi konfigurasi.

    3. Impor bundel di HTML Anda

      Setelah Anda menghasilkan bundel intlayer.js, Anda dapat mengimpornya di file HTML Anda:

      <!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />

    <!-- Impor bundel -->
    <script src="./intlayer.js" defer></script>
    <!-- Impor skrip utama Anda -->
    <script src="./src/main.js" defer></script>
  </head>
  <body>
    <h1 id="title"></h1>
    <p class="read-the-docs"></p>
  </body>
</html>

      Bundel tersebut mengekspos Intlayer dan VanillaIntlayer sebagai objek global di window.

    4. Bootstrap Intlayer di titik masuk (entry point) Anda

      Di src/main.js Anda, panggil installIntlayer() sebelum ada konten yang dirender sehingga singleton bahasa global sudah siap.

      const { installIntlayer } = window.VanillaIntlayer;

// Harus dipanggil sebelum merender konten i18n apa pun.
installIntlayer();

      Jika Anda juga ingin menggunakan perender markdown, panggil installIntlayerMarkdown():

      const { installIntlayer, installIntlayerMarkdown } = window.VanillaIntlayer;

installIntlayer();
installIntlayerMarkdown();

    5. Deklarasikan Konten Anda

      Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:

      import { insert, t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: "Vite + Vanilla",

    viteLogoLabel: t({
      en: "Vite Logo",
      fr: "Logo Vite",
      es: "Logo Vite",
    }),

    count: insert(
      t({
        en: "count is {{count}}",
        fr: "le compte est {{count}}",
        es: "el recuento es {{count}}",
      })
    ),

    readTheDocs: t({
      en: "Click on the Vite logo to learn more",
      fr: "Cliquez sur le logo Vite pour en savoir plus",
      es: "Klik logo Vite untuk mempelajari lebih lanjut",
    }),
  },
} satisfies Dictionary;

export default appContent;
      {
  "$schema": "https://intlayer.org/schema.json",
  "key": "app",
  "content": {
    "title": "Vite + Vanilla",
    "viteLogoLabel": {
      "nodeType": "translation",
      "translation": {
        "en": "Vite Logo",
        "fr": "Logo Vite",
        "es": "Logo Vite"
      }
    },
    "count": {
      "nodeType": "insertion",
      "insertion": {
        "nodeType": "translation",
        "translation": {
          "en": "count is {{count}}",
          "fr": "le compte est {{count}}",
          "es": "el recuento es {{count}}"
        }
      }
    },
    "readTheDocs": {
      "nodeType": "translation",
      "translation": {
        "en": "Click on the Vite logo to learn more",
        "fr": "Cliquez sur le logo Vite pour en savoir plus",
        "es": "Haga clic en el logotipo de Vite para obtener más información"
      }
    }
  }
}

      Deklarasi konten Anda dapat ditentukan di mana saja dalam aplikasi Anda segera setelah mereka disertakan dalam direktori contentDir (secara default, ./src). Dan sesuai dengan ekstensi file deklarasi konten (secara default, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

      Untuk detail lebih lanjut, lihat dokumentasi deklarasi konten.

    6. Gunakan Intlayer dalam JavaScript Anda

      Objek window.VanillaIntlayer menyediakan pembantu API: useIntlayer(key, locale?) mengembalikan konten yang diterjemahkan untuk kunci yang diberikan.

      const { installIntlayer, useIntlayer } = window.VanillaIntlayer;

installIntlayer();

// Dapatkan konten awal untuk bahasa saat ini.
// Rantai .onChange() untuk diberitahu setiap kali bahasa berubah.
const content = useIntlayer("app").onChange((newContent) => {
  // Render ulang atau tambal hanya node DOM yang terpengaruh
  document.querySelector("h1").textContent = String(newContent.title);
  document.querySelector(".read-the-docs").textContent = String(
    newContent.readTheDocs
  );
});

// Render awal
document.querySelector("h1").textContent = String(content.title);
document.querySelector(".read-the-docs").textContent = String(
  content.readTheDocs
);

      Akses nilai daun sebagai string dengan membungkusnya dalam String(), yang memanggil metode toString() dari node tersebut dan mengembalikan teks yang diterjemahkan.

      Saat Anda memerlukan nilai untuk atribut HTML asli (misalnya alt, aria-label), gunakan .value secara langsung:

      img.alt = content.viteLogoLabel.value;

    7. Ubah bahasa konten Anda

      Opsional

      Untuk mengubah bahasa konten Anda, gunakan fungsi setLocale yang diekspos oleh useLocale.

      const { getLocaleName } = window.Intlayer;
const { useLocale } = window.VanillaIntlayer;

export function setupLocaleSwitcher(container) {
  const { locale, availableLocales, setLocale, subscribe } = useLocale();

  const select = document.createElement("select");
  select.setAttribute("aria-label", "Bahasa");

  const render = (currentLocale) => {
    select.innerHTML = availableLocales
      .map(
        (loc) =>
          `<option value="${loc}"${loc === currentLocale ? " selected" : ""}>
            ${getLocaleName(loc)}
          </option>`
      )
      .join("");
  };

  render(locale);
  container.appendChild(select);

  select.addEventListener("change", () => setLocale(select.value));

  // Jaga dropdown tetap sinkron ketika bahasa berubah dari tempat lain
  return subscribe((newLocale) => render(newLocale));
}

    8. Ganti Bahasa HTML dan Atribut Arah

      Opsional

      Perbarui atribut lang dan dir dari tag <html> agar sesuai dengan bahasa saat ini untuk aksesibilitas dan SEO.

      const { getHTMLTextDir } = window.Intlayer;
const { installIntlayer, useLocale } = window.VanillaIntlayer;

installIntlayer();

useLocale({
  onLocaleChange: (locale) => {
    document.documentElement.lang = locale;
    document.documentElement.dir = getHTMLTextDir(locale);
  },
});

    9. Muat kamus secara bertahap (lazy-load) per bahasa

      Opsional

      Jika Anda ingin memuat kamus secara bertahap per bahasa, Anda dapat menggunakan useDictionaryDynamic. Ini berguna jika Anda tidak ingin menggabungkan semua terjemahan dalam file intlayer.js awal.

      const { installIntlayer, useDictionaryDynamic } = window.VanillaIntlayer;

installIntlayer();

const unsubscribe = useDictionaryDynamic(
  {
    en: () => import("../.intlayer/dictionaries/en/app.mjs"),
    fr: () => import("../.intlayer/dictionaries/fr/app.mjs"),
    es: () => import("../.intlayer/dictionaries/es/app.mjs"),
  },
  "app"
).onChange((content) => {
  document.querySelector("h1").textContent = String(content.title);
});

      Catatan: useDictionaryDynamic mengharuskan kamus tersedia sebagai file ESM terpisah. Pendekatan ini biasanya digunakan jika Anda memiliki server web yang melayani kamus.

    Konfigurasikan TypeScript

    Pastikan konfigurasi TypeScript Anda menyertakan tipe data yang dibuat secara otomatis.

    {
  "compilerOptions": {
    // ...
  },
  "include": ["src", ".intlayer/**/*.ts"],
}

    Ekstensi VS Code

    Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal Ekstensi resmi Intlayer VS Code.

    Instal dari VS Code Marketplace

    Ekstensi ini menyediakan:

    • Pelengkapan otomatis untuk kunci terjemahan.
    • Deteksi kesalahan waktu nyata untuk terjemahan yang hilang.
    • Pratinjau sebaris (inline) untuk konten yang diterjemahkan.
    • Tindakan cepat untuk membuat dan memperbarui terjemahan dengan mudah.

    Untuk detail lebih lanjut tentang cara menggunakan ekstensi ini, lihat dokumentasi Ekstensi Intlayer VS Code.

    Melangkah Lebih Jauh

    Untuk melangkah lebih jauh, Anda dapat mengimplementasikan editor visual atau mengeksternalisasi konten Anda menggunakan CMS.

    Mengapa Intlayer?