ロゼッタでSolidjsで国際化を始める方法

この記事では、追加する方法を示しますrosetta - 小さいが、強力なI 18 NライブラリSolidJs アプリケーション.

ロゼッタ
それは私が何をI 18 Nライブラリがチェックアウトされたとき私の注意を引いた最小限のライブラリです-5 libraries that looked interesting for me . それ以来、私は主に実験しましたi18next , しかし、それは多くのユースケースのために少し大きく感じます.

ソリッド
興味深いのは、今年の6月に1.0.0に達したようなフレームワークです.

新しいプロジェクトの開始
ソリッドで新しいアプリケーションを起動するには、最善の方法は次のとおりですdocumentation 使用degit 公式プロジェクトのスキャフォールドをコピーするには、次の手順に従います.

$ npx degit solidjs/templates/js solidjs-rosetta

プロジェクトの起動後、依存関係をインストールする必要があります.

$ cd solidjs-rosetta
$ npm install 

依存
必要な依存関係は、ロゼッタ自体だけです.

$ npm install --save rosetta

コード
I 18 Nを起動するには、オリジナルに置き換えますsrc/App.jsx で

import styles from "./App.module.css";

import rosetta from "rosetta";

const i18n = new rosetta({
  en: {
    hello: "Hello world!",
  },
});

i18n.locale("en");

function App() {
  return (
    <div class={styles.App}>
      <header class={styles.header}>{i18n.t("hello")}</header>
    </div>
  );
}

export default App;

ロケータとビルドアプリケーションとの間のサイズ差は、ビュー内でハードコード化されたものと同じです.

# i18n with rosetta
dist/assets/index.54039bfe.js      1.14 KiB / brotli: 0.54 KiB
dist/assets/vendor.8b5da6db.js     5.73 KiB / brotli: 2.10 KiB

# harcoded value
dist/assets/index.153e60c6.js      1.07 KiB / brotli: 0.51 KiB
dist/assets/vendor.29e4bc78.js     5.29 KiB / brotli: 1.91 KiB

約0.51キブ-非常に印象的な、私は言う.

作業アプリケーション
すべての場所で、アプリケーションは次のようになります.


リンク

example respository

working application

free video course for SolidJS

概要
本論文では,ソリッドに基づくアプリケーションに複数の言語を追加するための簡単なインフラストラクチャを構築した.