So instead of outputting each file to /static/js folder, we output to /static/js/<lang code>/ instead.
The i18n-webpack-plugin then replaces this this text with actual strings for each language. This happens when webpack compiles the the output files (during npm run build or npm run dev).
i18n-webpack-plugin needs a .json file to find the translations, so we use po2json to create a json conversion of each language's .po file.
These are the steps that need to be taken in addition to the existing extracting/compiling:
For all steps you should be in the isa subfolder within the main project folder
- Make sure you're messages.pot file is ready and up to date using Flask-Babel. At this stage you have all translation strings extracted from Python and HTML template files
find src/*.js -type f -print > js-file-list
- Invoke the xgettext command using the generated list as input, using --join-existing to add extracted translation to the existing .pot file
- Convert each .po file to JSON using po2json and save it as messages.json (in same folder as the .po and .mo file)
This has been setup as an npm script to build French json file (the only one we need initially).
npm run build-fr-json
Usage in files
- In any of the source js files, use the format __('some translatable text')
This can then be extracted to the .pot file in the process described above.
It will also be automatically replaced with the relevant translation for each language version of the js file.