Intlayer Compiler | i18n için Otomatik İçerik Çıkarımı

Intlayer Compiler Nedir?

Intlayer Compiler, uygulamalarınızda uluslararasılaştırma (i18n) sürecini otomatikleştirmek için tasarlanmış güçlü bir araçtır. Kaynak kodunuzu (JSX, TSX, Vue, Svelte) içerik bildirimleri için tarar, bunları çıkarır ve gerekli sözlük dosyalarını otomatik olarak oluşturur. Bu sayede içeriğinizi bileşenlerinizle birlikte tutabilirken, Intlayer sözlüklerinizin yönetimi ve senkronizasyonunu üstlenir.

Neden Intlayer Compiler Kullanmalısınız?

• Otomasyon: Sözlüklere içerik el ile kopyalayıp yapıştırma işlemini ortadan kaldırır.

• Hız: Optimize edilmiş içerik çıkarma, yapı işleminizin hızlı kalmasını sağlar.

• Developer Experience: İçerik deklarasyonlarını kullanıldıkları yerde tutun, bakımı iyileştirin.

• Otomasyon: İçeriğin sözlüklere manuel olarak kopyalanıp yapıştırılmasını ortadan kaldırır.
• Hız: Derleme sürecinizin hızlı kalmasını sağlayan optimize edilmiş içerik çıkarımı.
• Geliştirici Deneyimi: İçerik bildirimlerini kullanıldıkları yerde tutarak bakım kolaylığı sağlar.
• Canlı Güncellemeler: Geliştirme sırasında anlık geri bildirim için Hot Module Replacement (HMR) desteği sağlar.

Daha derin bir karşılaştırma için Compiler vs. Declarative i18n blog yazısına bakabilirsiniz.

Neden Intlayer Compiler Kullanmamalısınız?

Derleyici mükemmel bir "hemen çalışır" deneyimi sunarken, aynı zamanda farkında olmanız gereken bazı ödünleşmeler de getirir:

• Sezgisel belirsizlik: Derleyici, kullanıcıya yönelik içerik ile uygulama mantığı arasındaki farkı tahmin etmek zorundadır (örneğin, className="active", durum kodları, ürün kimlikleri). Karmaşık kod tabanlarında, bu manuel açıklamalar ve istisnalar gerektiren yanlış pozitifler veya kaçırılan dizelerle sonuçlanabilir.

• Yalnızca statik çıkarım: Derleyici tabanlı çıkarım statik analize dayanır. Yalnızca çalışma zamanında var olan dizeler (API hata kodları, CMS alanları vb.) derleyici tarafından tek başına keşfedilemez veya çevrilemez, bu nedenle hala tamamlayıcı bir çalışma zamanı i18n stratejisine ihtiyacınız vardır.

• Sadece statik çıkarma: Derleyici tabanlı çıkarma, statik analize dayanır. Yalnızca çalışma zamanında var olan dizeler (API hata kodları, CMS alanları, vb.) derleyici tarafından tek başına keşfedilemez veya çevrilemez, bu nedenle yine de tamamlayıcı bir çalışma zamanı i18n stratejisine ihtiyacınız vardır.

Daha derin bir mimari karşılaştırma için Compiler vs. Declarative i18n blog yazısına bakın.

Alternatif olarak, içeriğiniz üzerinde tam kontrolü korurken i18n sürecinizi otomatikleştirmek için, Intlayer ayrıca otomatik çıkarım komutu intlayer extract (bkz. CLI dokümantasyonu) veya Intlayer VS Code uzantısının Intlayer: extract content to Dictionary komutunu (bkz. VS Code uzantı dokümantasyonu) sağlar.

Kullanım

The quickest way to wire the compiler in is the interactive setup: run npx intlayer init --interactive and select Compiler. On Vite there is nothing to configure — the compiler is plugged in directly through the intlayerCompiler() plugin. On Next.js the command scaffolds the babel.config.js shown below. The non-interactive intlayer init leaves the compiler setup untouched.

npm install vite-intlayer

import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
  ],
});

# Vue için
npm install @intlayer/vue-compiler

# Svelte için
npm install @intlayer/svelte-compiler

npm install @intlayer/babel

const {
  intlayerExtractBabelPlugin,
  intlayerOptimizeBabelPlugin,
  getExtractPluginOptions,
  getOptimizePluginOptions,
} = require("@intlayer/babel");

module.exports = {
  presets: ["next/babel"],
  plugins: [
    // Bileşenlerden içeriği sözlüklere çıkarın
    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
    // useIntlayer'ı doğrudan sözlük içe aktarmalarıyla değiştirerek içe aktarmaları optimize edin
    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
  ],
};

Özel yapılandırma

Derleyici davranışını özelleştirmek için projenizin kök dizinindeki intlayer.config.ts dosyasını güncelleyebilirsiniz.

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

const config: IntlayerConfig = {
  compiler: {
    /**
     * Derleyicinin etkinleştirilip etkinleştirilmeyeceğini belirtir.
     * Geliştirme sırasında derleyiciyi atlamak ve başlangıç sürelerini hızlandırmak için 'build-only' olarak ayarlayın.
     */
    enabled: true,

    /**
     * Çıktı dosyalarının yolunu tanımlar. `outputDir` yerine geçer.
     *
     * - `./` ile başlayan yollar bileşen dizinine göre çözümlenir.
     * - `/` ile başlayan yollar projenin kök dizinine (`baseDir`) göre çözümlenir.
     *
     * - Yola `{{locale}}` değişkenini dahil etmek, dile göre ayrılmış sözlüklerin oluşturulmasını etkinleştirir.
     *
     * Örnekler:
     * ```ts
     * {
     *   // Bileşenin yanına çok dilli .content.ts dosyaları oluşturun
     *   output: ({ fileName, extension }) => `./${fileName}${extension}`,
     *
     *   // output: './{{fileName}}{{extension}}', // Şablon dizesi kullanarak eşdeğer kullanım
     * }
     * ```
     *
     * ```ts
     * {
     *   // Proje kökünde dile göre merkezileştirilmiş JSON dosyaları oluşturun
     *   output: ({ key, locale }) => `/locales/${locale}/${key}.content.json`,
     *
     *   // output: '/locales/{{locale}}/{{key}}.content.json', // Şablon dizesi kullanarak eşdeğer kullanım
     * }
     * ```
     *
     * Değişken listesi:
     *   - `fileName`: Dosya adı.
     *   - `key`: İçerik anahtarı.
     *   - `locale`: İçerik dili.
     *   - `extension`: Dosya uzantısı.
     *   - `componentFileName`: Bileşen dosya adı.
     *   - `componentExtension`: Bileşen dosya uzantısı.
     *   - `format`: Sözlük formatı.
     *   - `componentFormat`: Bileşen sözlük formatı.
     *   - `componentDirPath`: Bileşen dizin yolu.
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Bileşenlerin dönüştürüldükten sonra kaydedilip kaydedilmeyeceğini belirtir.
     * Bu şekilde, derleyici uygulamayı dönüştürmek için yalnızca bir kez çalıştırılabilir ve ardından kaldırılabilir.
     */
    saveComponents: false,

    /**
     * Oluşturulan dosyaya yalnızca içeriği yerleştirin. Dil başına i18next JSON çıktısı veya ICU MessageFormat için kullanışlıdır.
     *
     * - `output: ({ locale, key }) => `./locale/${locale}/${key}.json`,`
     */
    noMetadata: false,

    /**
     * Sözlük anahtar öneki
     */
    dictionaryKeyPrefix: "", // Ayıklanan sözlük anahtarları için isteğe bağlı bir önek ekleyin
  },
};

Derleyici Yapılandırma Referansı

Aşağıdaki özellikler intlayer.config.ts dosyanızın compiler bloğunda yapılandırılabilir:

• enabled:

  • Tip: boolean | 'build-only'
  • Varsayılan: true
  • Açıklama: Derleyicinin etkinleştirilip etkinleştirilmeyeceğini belirtir.

• dictionaryKeyPrefix:

  • Tip: string
  • Varsayılan: ''
  • Açıklama: Ayıklanan sözlük anahtarları için önek.

• transformPattern:

  • Tip: string | string[]
  • Varsayılan: ['**/*.{js,ts,mjs,cjs,jsx,tsx,vue,svelte}', '!**/node_modules/**']
  • Açıklama: (Kullanımdan kaldırıldı: bunun yerine build.traversePattern kullanın) Optimize edilecek kodu taramak için desenler.

• excludePattern:

  • Tip: string | string[]
  • Varsayılan: ['**/node_modules/**']
  • Açıklama: (Kullanımdan kaldırıldı: bunun yerine build.traversePattern kullanın) Optimizasyondan hariç tutulacak desenler.

• output:

  • Tip: FilePathPattern
  • Varsayılan: ({ key }) => 'compiler/${key}.content.json'
  • Açıklama: Çıktı dosyalarının yolunu tanımlar. outputDir yerine geçer. {{locale}}, {{key}}, {{fileName}}, {{extension}}, {{format}}, {{dirPath}}, {{componentFileName}}, {{componentExtension}}, ve {{componentFormat}} gibi dinamik değişkenleri işler. 'my/{{var}}/path' formatı kullanılarak bir dize olarak veya bir fonksiyon olarak ayarlanabilir.
  • Not: ./**/* yolları bileşene göre çözümlenir. /**/* yolları Intlayer baseDir'e göre çözümlenir.
  • Not: Yolda dil tanımlanmışsa, sözlükler dil başına oluşturulacaktır.
  • Örnek: output: ({ locale, key }) => 'compiler/${locale}/${key}.json'

• noMetadata:

  • Tip: boolean
  • Varsayılan: false
  • Açıklama: Meta verilerin dosyaya kaydedilip kaydedilmeyeceğini belirtir. Doğruysa, derleyici sözlüklerin meta verilerini (anahtar, içerik sarmalayıcı) kaydetmez. Dil başına i18next veya ICU MessageFormat JSON çıktıları için kullanışlıdır.
  • Not: loadJSON eklentisi ile kullanıldığında kullanışlıdır.
  • Örnek: Eğer true: json { "key": "value" } Eğer false: json { "key": "value", "content": { "key": "value" } }

• saveComponents:

  • Tip: boolean
  • Varsayılan: false
  • Açıklama: Bileşenlerin dönüştürüldükten sonra kaydedilip kaydedilmeyeceğini belirtir.

Eksik çevirileri doldur

Intlayer, eksik çevirileri doldurmanıza yardımcı olacak bir CLI aracı sağlar. Kodunuzdaki eksik çevirileri test etmek ve doldurmak için intlayer komutunu kullanabilirsiniz.

npx intlayer test         # Eksik çeviri olup olmadığını test et

npx intlayer fill         # Eksik çevirileri doldur

Çıkarma

Intlayer, kodunuzdan içerik çıkarmak için bir CLI aracı sağlar. Kodunuzdaki içeriği çıkarmak için intlayer extract komutunu kullanabilirsiniz.

npx intlayer extract

Daha fazla ayrıntı için CLI belgelerine bakın.