LinguiJSをViteで使う

LinguiJS はReactでi18nをするためのライブラリ。 Babelのマクロ に依存しているため、 Vite ではそのまま使えない。

Issueが存在してる。

• Document compatibility steps for Vite integration · Issue #975 · lingui/js-lingui
• Vite integration · Issue #1016 · lingui/js-lingui

上記のIssueで作られた LinguiをViteで使うPOC
https://github.com/capaj/vite-lingui-poc

デモ: https://capaj.github.io/vite-lingui-poc/

アプローチとしては、リポジトリ内に @vitejs/plugin-react-refreshをいじった reactBabelRefreshPlugin を用意して、それで変換するというもの。

vite-plugin-babel-macros を使う案もあるけど、それだと同じファイルがBabelによって2回パースされて遅くなるのが懸念であると書かれている。

フォークして vite-plugin-babel-macros を使う版も作ってみた。devもbuildも特に問題なく動いた。

https://github.com/orangain/vite-lingui-poc

npm run extract で lingui extract できることも確認した。

リポジトリルートの .babelrc がないと、extractに失敗する。