Rumah >hujung hadapan web >tutorial js >Terjemah Express Backend API Anda dengan express-inlayer (i)

Terjemah Express Backend API Anda dengan express-inlayer (i)

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-12-19 11:59:10386semak imbas

Translate Your Express Backend API with express-intlayer (i)

Mencipta aplikasi yang memenuhi keperluan pengguna dari negara dan bahasa yang berbeza boleh meningkatkan jangkauan dan kepuasan pengguna apl anda dengan ketara. Dengan express-inlayer, menambahkan pengantarabangsaan (i18n) pada bahagian belakang Express anda adalah mudah dan cekap. Dalam siaran ini, kami akan membimbing anda melalui penyediaan express-inlayer untuk menjadikan aplikasi Express anda berbilang bahasa, memastikan pengalaman yang lebih baik untuk pengguna di seluruh dunia.

Mengapa Mengantarabangsakan Bahagian Belakang Anda?

Mengantarabangsakan bahagian belakang anda membolehkan aplikasi anda berkomunikasi dengan berkesan dengan khalayak global. Dengan menyajikan kandungan dalam bahasa pilihan pengguna, anda boleh meningkatkan pengalaman pengguna dan menjadikan apl anda lebih mudah diakses. Berikut ialah beberapa sebab praktikal untuk mempertimbangkan untuk mengantarabangsakan bahagian belakang anda:

  • Mesej Ralat Setempat: Tunjukkan mesej ralat dalam bahasa ibunda pengguna untuk mengurangkan kekeliruan dan kekecewaan.
  • Pendapatan Kandungan Berbilang Bahasa: Layankan kandungan daripada pangkalan data anda dalam berbilang bahasa, sesuai untuk tapak e-dagang atau sistem pengurusan kandungan.
  • E-mel dan Pemberitahuan Disetempat: Hantar e-mel transaksi, kempen pemasaran atau pemberitahuan tolak dalam bahasa pilihan penerima untuk meningkatkan penglibatan.
  • Komunikasi Pengguna Dipertingkat: Sama ada mesej SMS, makluman sistem atau kemas kini UI, menyampaikannya dalam bahasa pengguna memastikan kejelasan dan meningkatkan pengalaman keseluruhan.

Mengantarabangsakan bahagian belakang anda bukan sahaja menghormati perbezaan budaya tetapi juga membuka aplikasi anda kepada khalayak yang lebih luas, menjadikannya lebih mudah untuk skala global.

Memperkenalkan pemasukan-ekspres

express-intlayer ialah perisian tengah yang direka untuk aplikasi Express yang menyepadukan dengan lancar dengan ekosistem intlayer untuk mengendalikan penyetempatan pada bahagian belakang. Inilah sebabnya ia merupakan pilihan yang bagus:

  • Persediaan Mudah: Konfigurasikan apl Express anda dengan pantas untuk menyampaikan respons berdasarkan pilihan tempat pengguna.
  • Sokongan TypeScript: Manfaatkan penaipan statik TypeScript untuk memastikan semua kunci terjemahan diambil kira, mengurangkan ralat.
  • Konfigurasi Fleksibel: Sesuaikan cara setempat dikesan, sama ada melalui pengepala, kuki atau kaedah lain.

Untuk maklumat lebih terperinci, lawati dokumentasi lengkap.

Bermula

Mari kita ikuti langkah-langkah untuk menyediakan pemasukan-ekspres dalam aplikasi Ekspres anda.

Langkah 1: Pemasangan

Mula-mula, pasang express-intlayer bersama-sama dengan intlayer menggunakan pengurus pakej pilihan anda:

npm install intlayer express-intlayer
pnpm add intlayer express-intlayer
yarn add intlayer express-intlayer

Langkah 2: Konfigurasi

Seterusnya, buat fail intlayer.config.ts dalam akar projek anda. Fail ini akan mentakrifkan tempat yang disokong dan bahasa lalai untuk aplikasi anda:

// intlayer.config.ts
import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH_MEXICO,
      Locales.SPANISH_SPAIN,
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Dalam contoh ini, kami menyokong bahasa Inggeris, Perancis, Sepanyol (Mexico) dan Sepanyol (Sepanyol), dengan bahasa Inggeris ditetapkan sebagai bahasa lalai.

Langkah 3: Integrasi Perisian Tengah Ekspres

Sekarang, sepadukan pemasuk-ekspres ke dalam aplikasi Ekspres anda. Begini cara anda boleh menyediakannya dalam src/index.ts anda:

import express, { type Express } from "express";
import { intlayer, t } from "express-intlayer";

const app: Express = express();

// Use intlayer middleware
app.use(intlayer());

// Sample route: Serving localized content
app.get("/", (_req, res) => {
  res.send(
    t({
      en: "Example of returned content in English",
      fr: "Exemple de contenu renvoyé en français",
      "es-ES": "Ejemplo de contenido devuelto en español (España)",
      "es-MX": "Ejemplo de contenido devuelto en español (México)",
    })
  );
});

// Sample error route: Serving localized errors
app.get("/error", (_req, res) => {
  res.status(500).send(
    t({
      en: "Example of returned error content in English",
      fr: "Exemple de contenu d'erreur renvoyé en français",
      "es-ES": "Ejemplo de contenido de error devuelto en español (España)",
      "es-MX": "Ejemplo de contenido de error devuelto en español (México)",
    })
  );
});

app.listen(3000, () => {
  console.info(`Listening on port 3000`);
});

Dalam persediaan ini:

  • Perisian tengah intlayer mengesan tempat pengguna, biasanya daripada pengepala Accept-Language.
  • Fungsi t() mengembalikan terjemahan yang sesuai berdasarkan tempat yang dikesan.
  • Jika bahasa yang diminta tidak tersedia, bahasa itu akan kembali ke tempat lalai (Bahasa Inggeris dalam kes ini).

Menyesuaikan Pengesanan Tempatan

Secara lalai, express-inlayer menggunakan pengepala Accept-Language untuk menentukan bahasa pilihan pengguna. Walau bagaimanapun, anda boleh menyesuaikan tingkah laku ini dalam intlayer.config.ts anda:

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

const config: IntlayerConfig = {
  // Other configuration options
  middleware: {
    headerName: "my-locale-header",
    cookieName: "my-locale-cookie",
  },
};

export default config;

Fleksibiliti ini membolehkan anda mengesan tempat melalui pengepala tersuai, kuki atau mekanisme lain, menjadikannya boleh disesuaikan dengan pelbagai persekitaran dan jenis pelanggan.

Keserasian dengan Rangka Kerja Lain

express-intlayer berfungsi dengan baik dengan bahagian lain ekosistem intlayer, termasuk:

  • react-inlayer untuk aplikasi React
  • pelapis seterusnya untuk aplikasi Next.js

Penyepaduan ini memastikan strategi pengantarabangsaan yang konsisten merentas keseluruhan timbunan anda, dari hujung belakang hingga hujung hadapan.

Memanfaatkan TypeScript untuk i18n Teguh

Dibina dengan TypeScript, express-inlayer menawarkan penaipan yang kuat untuk proses pengantarabangsaan anda. Ini bermakna:

  • Keselamatan Jenis: Tangkap kunci terjemahan yang hilang pada masa penyusunan.
  • Kebolehselenggaraan yang Dipertingkatkan: Lebih mudah untuk mengurus dan mengemas kini terjemahan dengan alatan TypeScript.
  • Jenis Dijana: Pastikan terjemahan anda dirujuk dengan betul dengan memasukkan jenis yang dijana (secara lalai di ./types/intlayer.d.ts) dalam tsconfig.json anda.

Membungkus

Menambahkan pengantarabangsaan pada bahagian belakang Express anda dengan express-intlayer ialah langkah pintar untuk menjadikan aplikasi anda lebih mudah diakses dan mesra pengguna untuk khalayak global. Dengan persediaan yang mudah, sokongan TypeScript dan pilihan konfigurasi yang fleksibel, express-inlayer memudahkan proses menyampaikan kandungan dan komunikasi setempat.

Bersedia untuk menjadikan bahagian belakang anda berbilang bahasa? Mula menggunakan express-inlayer dalam aplikasi Express anda hari ini dan berikan pengalaman yang lancar untuk pengguna di seluruh dunia.

Untuk butiran lanjut, pilihan konfigurasi dan corak penggunaan lanjutan, lihat dokumentasi lengkap rasmi atau lawati repositori GitHub untuk menerokai kod sumber dan menyumbang.

Atas ialah kandungan terperinci Terjemah Express Backend API Anda dengan express-inlayer (i). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn