I18 best practice

Question

I have successfully implemented i18next, which, by the way, is a great library! Although I'm still looking for "best practice." This is the setup I have right now that I generally like:

var userLanguage = 'en'; // set at runtime i18n.init({ lng : userLanguage, shortcutFunction : 'defaultValue', fallbackLng : false, load : 'unspecific', resGetPath : 'locales/__lng__/__ns__.json' }); 

In the DOM, I do this:

 <span data-i18n="demo.myFirstExample">My first example</span> 

And in JS, I do this:

 return i18n.t('demo.mySecondExample', 'My second example'); 

This means that I support English translation inside the code itself. However, I support other languages ​​using separate translation.json files using i18next-parser:

 gulp.task('i18next', function() { gulp.src('app/**') .pipe(i18next({ locales : ['nl','de'], output : '../locales' })) .pipe(gulp.dest('locales')); }); 

Everything works great. The only problem is that when I set 'en' as userLanguage , i18next insists on extracting the file /locales/en/translation.json , although it does not contain any translations. To prevent 404, I am currently serving an empty json object {} in this file.

Is there a way to prevent an empty .json file from loading at all?

Answer 1

Maybe I missed something, but you couldn't just do this:

 if (userLanguage != 'en') { i18n.init({ lng : userLanguage, shortcutFunction : 'defaultValue', fallbackLng : false, load : 'unspecific', resGetPath : 'locales/__lng__/__ns__.json' }); } 

This way your i18n script will not be initialized unless you really need a translation service.

Answer 2

See http://i18next.com/pages/doc_init.html in the section "Whitelisting languages ​​that must be allowed for init" (cannot fragment the link to these documents ...):

 i18n.init({ lngWhitelist: ['de-DE', 'de', 'fr'] }); 

You can download only the specified languages.

This should solve your problem. Although I suppose the blacklist will be even better.

Answer 3

i18next-parser author here, I will explain how I use i18next and hopefully this helps:

1 / I do not use defaultTranslation in code. The reason is that it does not belong to the code. I understand the advantage of having the actual text, but the code can swell quickly. The hard part is identifying clear translation keys. If you do this, you no longer need the default text. Translation keys are self-learning.

2 / If you have number 404 on /locales/en/translation.json , you may not have a file in the public directory or something like that. With gulp, you can have multiple destinations and do dest('locales').dest('public/locales') for example.

3 / If there is no translation in the directory, first run the gulp task. As for filling the default directory, you have a difficult problem with regular expressions. Think about this case <div data-i18n="key">Default <div>translation</div></div> . It should be able to parse the internal html and extract all the content. I just did not find the time to implement it, since I do not use it.