Implementierung der Laravel-Lokalisierung in JavaScript

Kürzlich stieß ich auf ein Szenario, wo ich brauche, um die Lokalisierung in meine JS-Dateien verwenden & was wir eigentlich erreichen wollen, ist meine Übersetzung Dateien aus lang Verzeichnis zu meinem JS-Dateien mit einer Art von Funktion oder Variable übergeben. Lassen Sie uns sehen, einen einfachen Ansatz, um dies zu erreichen.

Lesen Sie auch: Sichere Laravel-Bereitstellung in der Produktion

Schritt # 01 - Erstellen einer ServiceProvider

Beginnen wir mit der Erstellung einer ServiceProvider und nennen Sie es LocalizationServiceProvider likeso,

php artisan make:provider LocalizationServiceProvider

Jetzt in unserem root Methode der LocalizationServiceProvider.php

$this->langPath = resource_path( 'lang/'. App::getLocale() );
Cache::rememberForever( 'translations', function () {
   return collect( File::allFiles( $this->langPath ) )->flatMap( function ( $file ) {
      return [
         $translation = $file->getBasename( '.php' ) => trans( $translation ),
      ];
   } )->toJson();
} );

Lesen Sie auch: Die 10 besten Gründe, Laravel zu wählen

Das Attribut Übersetzungen wird für immer im Cache gespeichert, bis Sie den Cache Ihrer Anwendung löschen. (php artisan cache:clear) oder holen Sie Übersetzungen aus Ihrem Cache.(Cache:pull('translations'))

Vergessen Sie nicht, sich zu registrieren LocalizationServiceProvider in Ihrem config/app.php

Lesen Sie auch: index.php aus der URL in Laravel entfernen

Schritt # 02 - Weitergabe an JS

Jetzt in unserem footer.blade.php, können wir die Übersetzungsvariable likeso übergeben

<script>
   var translations = {!! \Cache::get('translations') !!};
</script>

Schritt # 03 - Erstellen einer Funktion in JS

Wir werden nun eine einfache Funktion innerhalb einer unserer JavaScript-Dateien erstellen, um Daten von Übersetzungen zu erhalten und damit herumzuspielen. Was wir hier brauchen, ist die Nutzung der grundlegenden Funktionen des Laravel-Übersetzers, und wir wollen einen String abrufen, der mit dem angegebenen Schlüssel gepaart ist.

Lesen Sie auch: Polymorphe Beziehungen in Laravel

function trans(key, replace = {}) {
    var translation = key.split('.').reduce((t, i) => t[i] || null, window.translations);

    for (var placeholder in replace) {
        translation = translation.replace(`:${placeholder}`, replace[placeholder]);
    }
    return translation;
}

Schritt # 04 - Anwendungsfall

Wir können jetzt einfach unsere Übersetzungen in unseren JS-Dateien verwenden, z.B.

trans('auth.validation.success'),

Behebung einer Störung

In meinem Fall haben wir mehrere Sprachen, z. B. en, vi, es usw. Aber bei Switches-Sprachen holen wir die Datensätze immer noch von der Standard (en) nur Sprache. Das müssen wir ändern.

Also, wenn man App::getLocale();, seine en standardmäßig und speichern dennoch die en Sprachdateien in den Cache, und bis wir unseren Cache leeren, bleiben sie dort, egal was passiert.

Lesen Sie auch: Lokalisierung Laravel

Für eine einfache Lösung habe ich das Folgende getan. Lassen Sie uns im Kommentarbereich wissen, ob Sie eine bessere Lösung für dieses Problem haben.

Wiederum im root Methode unserer LocalizationServiceProvider

if ( request()->is( 'en', 'en/*' ) ) {
   Cache::pull( 'translations' );
   App::setLocale( 'en' );
   $this->langPath = resource_path( 'lang/en' );
} elseif ( request()->is( 'vi', 'vi/*' ) ) {
   Cache::pull( 'translations' );
   App::setLocale( 'vi' );
   $this->langPath = resource_path( 'lang/vi' );
}

Schlussfolgerung

Wir haben die Lokalisierung von Laravel erfolgreich in unseren JS-Dateien verwendet. Wenn Sie irgendwelche Rückmeldungen oder Kommentare haben, schreiben Sie uns im Kommentarbereich unten.

Die Idee zu diesem Artikel wurde inspiriert von Using Laravel's Localization in JS