Halo semuanya!
Hanya ada beberapa hari tersisa sampai tahun baru. Saya menemukan daftar kasus yang akan saya lakukan pada 2019, di antaranya ternyata menulis artikel tentang Habr. Sudah waktunya untuk turun ke mobil keluar).
Saya akan segera melakukan pemesanan, PR sepeda saya, jika Anda tidak suka ini, maka Anda dapat melewati artikel dengan aman.
Apa itu lokalisasi?
Dengan pelokalan selanjutnya kita akan memahami proses mengadaptasi aplikasi ke berbagai bahasa dan wilayah. Pelokalan bukan hanya tentang menerjemahkan teks. Lebih menyenangkan bagi pengguna untuk melihat format tanggal yang biasa, nilai moneter, bahkan pemisah dalam angka dapat berperan.
Motivasi
Sebenarnya, mengapa Anda perlu melakukan pelokalan aplikasi? Pelokalan aplikasi adalah peningkatan ketersediaan antarmuka Anda yang terkenal buruk, yang akhir-akhir ini banyak dibicarakan orang. Lokalisasi memperluas grup target yang menjadi sasaran aplikasi Anda.
Apa yang saya inginkan dari perpustakaan lokalisasi
- Dukungan tata bahasa ICU
- Pemformatan tanggal
- Pemformatan angka
Apa yang terjadi
Tautan ke GitHub .
Perpustakaan yang paling populer (menurut analisis asterisk) untuk lokalisasi reaksi aplikasi React diambil sebagai dasar. Di bawah tenda, react-intl menggunakan paket intl-messageformat-parser yang membangun pohon AST. Menurut bundlephobia, ukuran signifikan adalah apa yang diambil pengurai. Ini tidak ditulis dengan tangan, tetapi menggunakan PEG.js. Saya menulis sendiri untuk keperluan ini, yang beratnya 6 kali lebih sedikit. Sangat mungkin saya bisa melewatkan satu kasus, saya akan berterima kasih jika seseorang memberi tahu saya.
Berkat dukungan luar biasa dari API Internasionalisasi oleh browser modern, format tanggal dan angka diselesaikan dengan sendirinya. Yang diperlukan hanyalah menyimpan bahasa pengguna saat ini di suatu tempat untuk menerapkannya pada pemformatan dan memberikan api yang lebih nyaman, dalam bentuk formatSomething(value, options) .
Dengan demikian, paketnya adalah @ eo-locale / core, yang umumnya tidak terikat dengan kerangka kerja atau pustaka dan dapat digunakan dengan cukup fleksibel.
Bereaksi
Versi Bereaksi adalah kumpulan komponen dan kait.
Untuk mulai menggunakan eo-locale bungkus aplikasi di Penyedia.
import { EOLocale } from 'eo-locale'; const locales = [ { language: 'en', messages: { hello: 'Hello {name}!' } }, ]; <EOLocale.Provider language="en" locales={locales}> <span> <EOLocale.Text id="hello" name="World" /> // Helo World! </span> </EOLocale.Provider>
Pemformatan angka tersedia melalui proksi properti Intl.NumberFormat standar
import { EOLocale } from 'eo-locale'; <EOLocale.Number value={1000} /> // 1,000 <EOLocale.Number value={1000} currency="EUR" maximumFractionDigits={2} minimumFractionDigits={2} style="currency" /> // €1,000.00
Pemformatan tanggal juga diterapkan:
import { EOLocale } from 'eo-locale'; <EOLocale.Date value={new Date(2019, 2, 19)} /> // 3/19/2019 <EOLocale.Date value={new Date(2019, 2, 19)} day="numeric" month="long" year="numeric" weekday="long" /> // Tuesday, March 19, 2019
Semua hal di atas juga bisa dilakukan tidak melalui komponen, tetapi menggunakan hook useTranslator :
import { useTranslator } from 'eo-locale'; function SomeComponent() { const translator = useTranslator(); return <div>{translator.formatNumber(1000)}</div>; }
Salah satu keunggulan penting dibandingkan perpustakaan serupa lainnya adalah kemampuan untuk menggunakan komponen sebagai alat peraga. Misalnya, Anda memiliki komponen bergaya Money , yang menunjukkan nilai dalam satu warna, dan mata uang masuk yang lain dan Anda perlu memasukkan sejumlah uang ke lokal:
import { EOLocale } from 'eo-locale'; import { Money } from '...somewhere'; const locales = [ { language: 'en', messages: { total: 'Total price is {price}' } }, ]; <EOLocale.Text id="total" price={<Money amount={1000} />} /> // Total price is €1,000.00
Ada juga kemampuan untuk menampilkan nilai jamak. Ini diimplementasikan menggunakan Intl.PluralRules .
import { EOLocale } from 'eo-locale'; const locales = [ { language: 'en', messages: { items: '{count, plural, one {You have one item} other {You have {count} items}}' } }, ]; <EOLocale.Text id="items" count={3} /> // You have 3 items
Preact
Semua fitur yang sama diimplementasikan untuk Preact dalam paket yang sesuai.
Beberapa fitur
Perpustakaan sepenuhnya ditulis dalam naskah, jadi taiping keluar dari kotak.
Belum lama ini, kami menemukan masalah bahwa ketika melokalkan kode kesalahan yang dikirim server, tidak ada terjemahan pada klien. Untuk melakukan ini, Penyedia telah ditambahkan kemampuan untuk melempar handler onIdMissing, yang dengannya Anda dapat mencatat kesalahan semacam ini.
Kesimpulan
Saya sangat berharap seseorang akan menemukan perpustakaan yang bermanfaat. Saya akan senang dengan saran dan kritik yang sehat. Jangan lupa bahwa meskipun situs Anda sekarang hanya berfokus pada satu bahasa, situasi ini dapat berubah seiring waktu. Untuk meletakkan dukungan untuk multibahasa di muka tidak memerlukan banyak waktu, dan semua teks yang digunakan dalam aplikasi akan disusun.