تكامل 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. إعداد المصادقة

قم بإنشاء حساب مجاني على groq.com وأضف مفتاح API الخاص بك:

# .env

GROQ_API_KEY=gsk_...

الخطوة 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 الخاصة بـ 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 لا يعمل: أعد تشغيل خادم التطوير بعد إضافة محتوى قابل للترجمة جديد.

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

• التكوين المتقدم: خيارات التخصيص
• الأسئلة الشائعة: الأسئلة الشائعة واستكشاف الأخطاء وإصلاحها
• كيف يعمل: فهم عملية البناء