تكامل Vite

يتكامل مُترجم Lingo.dev مباشرة مع Vite لتوفير الترجمة وقت البناء لتطبيقات React.

اتبع هذه الخطوات لإضافة دعم متعدد اللغات إلى تطبيق Vite + React الخاص بك.

أو استكشف مشروع Vite التجريبي لتجربة المُترجم قيد التشغيل.

المتطلبات الأساسية

  • Vite 4+
  • React 18+
  • Node.js 18 أو أعلى

الخطوة 1. تثبيت الحزمة

قم بتثبيت حزمة lingo.dev:

npm install lingo.dev

الخطوة 2. تكوين Vite

قم باستيراد وتكوين المُترجم في ملف vite.config.ts الخاص بك:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  plugins: [react()],
  // تكوين Vite الحالي الخاص بك
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
  })(viteConfig),
);

الخطوة 3. إعداد المصادقة

مُجمّع Lingo.dev يرسل المحتوى الخاص بك إلى محركات الترجمة بالذكاء الاصطناعي للتوطين، لذلك تحتاج إلى المصادقة أولاً.

الخيار 1. محرك Lingo.dev

يمكن لمُجمّع Lingo.dev استخدام محرك Lingo.dev كمحرك الترجمة بالذكاء الاصطناعي. يوفر اختيار النموذج الديناميكي، والتوجيه التلقائي، وذاكرة الترجمة، ودعم المصطلحات. تتوفر خيارات مجانية ومدفوعة.

للمصادقة، قم بتشغيل:

npx lingo.dev@latest login

إذا واجهت مشكلات في تدفق المتصفح، يمكنك إضافة LINGODOTDEV_API_KEY يدويًا إلى ملف .env الخاص بك:


# .env

LINGODOTDEV_API_KEY=...

ستجد الرمز المميز في إعدادات مشروع محرك Lingo.dev.

الخيار 2. مزود LLM بديل

بدلاً من ذلك، يمكنك استخدام نماذج من مزودي نماذج اللغة الكبيرة (LLM) المدعومين:

أضف مفتاح (مفاتيح) API الخاص بك إلى ملف .env الخاص بك:


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

ملاحظة: تأكد من تفعيل حسابك مع مزود نماذج اللغة الكبيرة وقبول شروط الخدمة الخاصة بهم قبل استخدامه في المُجمّع.

الخطوة 4. إضافة المزود

قم باستيراد المزود في ملف الإدخال الرئيسي (src/main.tsx):

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
      <App />
    </LingoProviderWrapper>
  </React.StrictMode>,
);

الخطوة 5. اختياري: إضافة مبدل اللغة

قم بإنشاء مكون مبدل اللغة في التطبيق أو الترويسة الخاصة بك:

import { LocaleSwitcher } from "lingo.dev/react/client";

function App() {
  return (
    <div className="App">
      <header>
        <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
      </header>
      <main>
        <h1>Welcome to our app</h1>
        <p>This content is automatically translated</p>
      </main>
    </div>
  );
}

export default App;

الخطوة 6. البناء والاختبار

ابدأ خادم التطوير الخاص بك:

npm run dev

سيقوم المُصنّف تلقائيًا بما يلي:

  1. فحص مكونات React الخاصة بك للمحتوى القابل للترجمة
  2. استخراج مفاتيح الترجمة
  3. إنشاء ترجمات مدعومة بالذكاء الاصطناعي
  4. إنشاء ملفات ترجمة محسّنة في دليل lingo/

قم بزيارة http://localhost:5173 لمشاهدة تطبيقك متعدد اللغات قيد التشغيل.

خيارات التكوين

يمكنك تخصيص سلوك المُصنّف:

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);

ميزات التطوير

استبدال الوحدة الساخن (HMR)

يدعم المُصنّف ميزة HMR الخاصة بـ Vite لتحديثات الترجمة:

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>Edit this text and see translations update automatically</p>
    </div>
  );
}

تحسين البناء

يعمل تحسين بناء Vite بسلاسة مع المُصنّف:

  • تقسيم الكود يتضمن حزم الترجمة
  • تحسين الأصول يتعامل مع ملفات الترجمة بكفاءة
  • هز الشجرة يزيل الترجمات غير المستخدمة

هيكل المشروع النموذجي

my-vite-app/
├── src/
│   ├── components/
│   │   └── Welcome.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── lingo/           # ملفات الترجمة المُنشأة
│       ├── meta.json
│       └── dictionary.js
├── vite.config.ts
├── package.json
└── .env

نشر الإنتاج

  1. بناء التطبيق الخاص بك:

    npm run build

  2. التزام ملفات الترجمة:

    git add src/lingo/
git commit -m "Add translations"

  3. النشر باستخدام المنصة المفضلة لديك (Vercel، Netlify، إلخ)

سيقدم تطبيق Vite الخاص بك المحتوى المترجم تلقائيًا بناءً على تفضيلات المستخدم.

استكشاف الأخطاء وإصلاحها

المشكلات الشائعة

عدم إنشاء الترجمات: تأكد من تعيين GROQ_API_KEY بشكل صحيح في ملف .env الخاص بك.

أخطاء البناء: تأكد من تضمين دليل lingo/ في نظام التحكم بالإصدارات الخاص بك.

عدم عمل HMR: أعد تشغيل خادم التطوير بعد إضافة محتوى جديد قابل للترجمة.

الخطوات التالية