i18nize-react 一顿饭功夫就能将react应用程序国际化

i18nize-react 一顿饭功夫就能将react应用程序国际化

i18nize-react

Internationalize legacy react apps in a lunch break.

i18nize-react finds and replaces all the hardcoded string literals in your react project with i18n bindings. It uses babel to walk on react components and process them.

Getting started

First install the i18nize-react globally using npm

npm i -g i18nize-react

Now in your react app run

npm install i18next

Tested on i18next other variants should work with minor changes.

Make sure there are no unstaged changes, you may need to git reset --hard.

Now run.

i18nize-react

Go for lunch Run your favourite linter to clean things up. It should create four files src/i18n/init.js, src/i18n/keys.js, src/i18n/english.js, src/i18n/chinese.js. Add the line import ./i18n/init.js; in your App's entry point. Usually it is src/index.js. Change the lng key in your browser's local storage to see changes.

Contributions

Create an issue ticket with a before and after code snippets, before writing any code and raising a PR.

For bugs create a minimum reproducible piece of code with original, received and expected snippets.

Make sure to read wont-fix.md.

Troubleshooting

Sometimes i18ize-react might conflict with the babel plugins installed in your project. If that happens go up one folder (cd ..) and then run i18ize-react ./your-dir ./your-dir By default i18ize-react assumes that your code is in /src but if you want to change that you can use the third argument. e.g. i18ize-react ./ ./ web will crawl /web instead. Constant initialization outside react lifecycle is not guaranteed. To resolve this, move all initialized strings inside the component.

// String 1 might not load correctly const string1 = i18next.t(k.STRING1);const MyComponent = () => { // String 2 will load correctly const string2 = i18next.t(k.STRING2); return (

TIP: Babel's parse and generate often shifts code around which causes files, with no programatic change, to show up in git diff. Sometimes running the linter alone does not fix this problem. A good way to fix this problem is to do a dry run i18nize-react ./ ./ src true, run your linter and commit the code. Now run i18nize-react to run the transform and lint again. Now only the transformed changes should show up in git diff.

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。