amdi18n-loader

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

Install

npm install amdi18n-loader

Usage

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);


});

Advanced Usage

Enable/Disable language packages

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.

Expose Root Object

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!')

Notice

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'
},

History

v0.8.0 (2018-07-01)

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.

v0.7.0 (2018-03-20)

Support functions in lang files. #20 (By ggriffithsIDBS)

v0.6.2 (2017-10-16)

Fix: failed to fallback to root. #17

v0.6.1 (2017-06-29)

Add lang files to webpack dependencies, so they can be watched and live-reloaded. See #15. (By jou)

v0.6.0 (2017-06-11)

Add a type of format support (for require.js i18n plugin). See #14.

v0.5.2 (2017-02-07)

Fix: multi values in enable / disable queries invalid. #10
If a lang specified in enable, no longer required to specify in root.

v0.5.1 (2017-01-14)

Fix: AMD lang file without factory function not working. #8

v0.5.0 (2017-01-13)

Add enable and disable queries. #6
Detect default language by html[lang] attribute. #7
Rewrite the method that extract language definitions.
Add testing & travis CI.

v0.4.0 (2016-01-18)

Support .coffee language files. (By Mullerzs)

v0.3.2 (2015-12-15)

Fix bug using in UMD mode. (By Rick)

v0.3.1 (2015-12-15)

Fix bug on IE. (By Rick)

v0.3.0 (2015-12-14)

Support load CommonJS module and json file. (By Rick)

v0.2.0 (2015-10-15)

Auto init.

v0.1.0 (2015-10-14)

First release.

CmouseG/webpack-amdi18n-loader