Documentation on how to extract and load translations?

Hey! We have a react application that we need to translate and are evaluating using 18next vs react-intl for this. I’m having a problem finding the documentation necessary to evaluate it and hoping you can help me!

We use the service transifex (https://www.transifex.com/) for all of our translations (Native apps, backend servers, etc) and want to continue using that on this react app. What they need from us is translations extracted from our .js files and uploaded to them, they support many formats but we use gettext everywhere else ( https://docs.transifex.com/formats/gettext ).

So my question:

• How can I extract translations into a static .json or .po file that can be sent to a translation service?
• How can I use webpack to load the translated files for i18next to read?

I see a lot of the community is using xhr backend but we will not be doing this, we will be using webpack + code-splitting to make sure we only need to bundle the languages the user needs.

I did search the internet/docs before opening this issue and found this blog post which talks about exactly what I need:

https://medium.com/@jamuhl/i18n-frameworks-the-unfair-showdown-8d436cd6f470

Round 5: How to extract translations from your code

but the link is dead.

Ideally I could use babel/webpack to extract all the strings.

Thanks for your help!

[jamuhl]

For react and i18next have a look at react-i18next (comes with endless samples): https://github.com/i18next/react-i18next

Regarding tooling: You will find both extraction tools and bundlers/loaders for webpack here: https://www.i18next.com/plugins-and-utils.html#utils

there is also a gettext converter -> if you like to stay on gettext for transfer (on top of the utils list)

regarding transifex, not want to make advertising, but i18next has a own translation management / localization as a service tier: https://locize.com

comes with a lot of benefits and is less expensive 😉 -> see the example in the react-i18next repo https://github.com/i18next/react-i18next/tree/master/example/locize-example —> movie that says more than words https://www.youtube.com/watch?v=9NOzJhgmyQE

Both supported react-intl’s icu format and i18next (so no thinking about converting plurals) -> really worth a try (we got a lot customers switching over from transifex)

[jamuhl]

@norayr93 beside i18next-parser, i18next-scanner there is now also babel-plugin-i18next-extract https://www.i18next.com/overview/plugins-and-utils#extraction-tools

still, the most comfortable way is using the saveMissing with https://locize.com during development time.

This also gives you a proper solution at hand to involve your translators into the process 👍