Translate Loader for Webpack
The translate-loader
is especially useful if you use webpack and need to support multi language.
With translate-loader
modules are imported/required from different locations depending on the locale.
For example, if you write import texts from './text_nls'
, texts
will have the content of ./fr/text_nls
, if the locale is 'fr'
.
Preferrable, the locale should be defined as global variable named locale
.
If that variable is not defined, translate-loader
falls back to navigator.language
or navigator.userLanguage
.
It's also possible, by setting the option returnFunction
to true
, to ask translate-loader
to return a function that you could then call passing the locale as argument.
Install
npm install --save-dev translate-loader
Usage
Hello World Example
helloworld.js
;; console;
nls/labels_nls.json
nls/strings_nls.js
textFromJsModule: "Text from a JS Module";
nls/en/labels_nls.json
nls/en-US/labels_nls.json
nls/es/labels_nls.json
nls/pt/labels_nls.json
nls/pt/strings_nls.js
textFromJsModule: "Texto de um módulo JS";
webpack.config.js
moduleexports = module: rules: test: /_nls\.js?$/ use: "translate-loader?locales=en;en-US;es;pt" ;
or
webpack.config.js
moduleexports = module: rules: test: /_nls\.js?$/ use: loader: "translate-loader" options: locales: "en" "en-US" "es" "pt" ;
Multiple locales at the same time
helloworld.js
; const stringsPt = ;const stringsEn = ; console;console;
nls/strings_nls.json
nls/en/strings_nls.json
nls/pt/strings_nls.json
webpack.config.js
moduleexports = module: rules: test: /_nls\.js?$/ use: loader: "translate-loader" options: locales: "en" "pt" returnFunction: true ;
Maintainers
Willian Balmant |