Webpack i18n loader helps your projects to process internationalization (i18n).
It's quite similar to require.js i18n plugin.
Features:
- Fully compatitable with webpack 1/2/3/4
- Works with language packages. (similar to require.js)
- Support CommonJS/AMD/ESM module and
.json
files, and more,.coffee
files - Auto init current language via
html[lang]
attribute or global varible - Switch current language at runtime
- Enable/Disable language packages via queries
npm install amdi18n-loader
First look at require.js i18n plugin's docs here.
The structure of language packages are like this:
lang.js
zh-cn/lang.js
zh-hk/lang.js
lang.js:
define({
// root means the common language package
root:{
HELLO:'hello'
},
// we have the language packages below:
'zh-cn':true,
'zh-hk':true
});
zh-cn/lang.js example:
define({
// please note: no wrapper object here!
HELLO:'hello in zh-cn'
});
Then use it like this:
define([
'amdi18n-loader!lang'
],function(amdi18n){
// By default, it will lookup `window._i18n.locale`,
// If not found, it will try to use the html[lang] attribute,
// For example: <html lang="en"> then language `en` was used,
// If nothing found, `root` was used.
// You can manully change the language by
// `amdi18n.init(language)`;
console.log(amdi18n.HELLO);
});
You can pass queries to enable or disable some langs.
// We use commonjs now. It matters nothing.
var lang = require('amdi18n-loader?enable=[zh-cn]!');
// It's not ok to use zh-hk now!
lang.init('zh-hk');
The code below behaviors the same:
// We use commonjs now. It matters nothing.
// Notice: we use `|` to as separator,
// Because webpack will break the comma.
var lang = require('amdi18n-loader?disable=[zh-hk|en-us]!');
// It's not ok to use zh-hk now!
lang.init('zh-hk');
It's ok to use both enable
and disable
, but if any one disables a lang, the lang will not be usable. You can decide which to use by the length of list.
In some case, accessing root
object is required (#19). You can pass a query expose-root
to expose the root
object.
require('amdi18n-loader?expose-root=1!')
If you choose to use .json
files as your lang files in webpack 4+, You need to specify the type of json files, otherwise webpack will try to parse the final script content as JSON, and throws errors.
// in module.rules
{
// to avoid affecting other json files
// you'd better specify the lang files only,
test: /\.json$/,
type: 'javascript/auto'
},
- Support webpack 4.
- Support ESM modules in lang files. (
export default {}
). #16 - Add a config to expose the
root
object. #19 - Support using in global config (e.g.
webpack.config.js
) and passing options. - Better auto test for Node 7/8/10 and webpack 1/2/3/4.
- Support functions in lang files. #20 (By ggriffithsIDBS)
- Fix: failed to fallback to root. #17
- Add lang files to webpack dependencies, so they can be watched and live-reloaded. See #15. (By jou)
- Add a type of format support (for require.js i18n plugin). See #14.
- Fix: multi values in
enable
/disable
queries invalid. #10 - If a lang specified in
enable
, no longer required to specify in root.
- Fix: AMD lang file without factory function not working. #8
- Add
enable
anddisable
queries. #6 - Detect default language by html[lang] attribute. #7
- Rewrite the method that extract language definitions.
- Add testing & travis CI.
- Support
.coffee
language files. (By Mullerzs)
- Fix bug using in UMD mode. (By Rick)
- Fix bug on IE. (By Rick)
- Support load CommonJS module and json file. (By Rick)
- Auto init.
- First release.