react-i18loader

react-i18loader

react-i18loader 是一个专门为React和React的相关框架（比如NextJS）定制的一个多语言国际化用于 webpack 的loader插件 

它有什么好处?

1. 你可以在页面中任意的写你的中文

2. loader会自动提取你的中文并生成JSON翻译文件

3. 你只需要修改JSON翻译文件中其他的语言值，就可以实现多语言国际化功能 

它是怎么工作的?

1. 提取你需要翻译的语言.
2. 在该文件的同级目录下生成一个相同名称的JSON文件.
3. loader会自动的让你的组件或页面引用这个文件.
4. 你需要改变你的组件或页面中对应的语言值$lang来改变多语言.

使用

一、简单使用

安装

首先使用如下命令安装: 

 npm install react-i18loader --save-dev 

配置 webpack

{
    test: /\.(js|jsx)$/, // this loader will generate *.lang.json beside *.jsx files
    exclude: [
        /(node_modules)|(\.next)/,
    ],
    use: {
        loader: "react-i18loader",
        options: {
            // The folder where store the language json file.
            // If storePath value is null or empty, the language json file would store corresponding to target js/jsx file
            storePath: "locales",
            languages: ["zh_Hans_CN", "zh_Hant_HK", "en_US"], // The langauages that you App supported
        }
    }
}

在你的组件或页面中放置标签 @i18n("Page_Or_Component_Name") 

请看以下例子

组件：hello.js

import React, { Component } from "react";

@i18n("Hello")
export default class Hello extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const msg = "我是简体";
    return <div>
      <p>你好，欢迎使用react-i18loader，发现代码之美</p>
      <p>{msg}</p>
    </div>
  }
}

• 你需要改变props中的$lang的值来切换语言，就像下面例子，点击了不同的按钮，改变了组件Hello里$lang的值，从而实现了语言的切换

页面：index.js

import React, { Component } from "react";
import Hello from "../components/hello";

export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lang: "zh_Hans_CN"
    };
  }

  changeLang(lang) {
    this.setState({lang});
  }

  render() {
    return <div>
      <button onClick={this.changeLang.bind(this, "zh_Hans_CN")}>简体中文</button> 
      <button onClick={this.changeLang.bind(this, "zh_Hant_HK")}>繁體中文</button>
      <button onClick={this.changeLang.bind(this, "en_US")}>English</button>
      <Hello $lang={this.state.lang}/>
    </div>
  }
}

注意事项

1. js语法中可以写任意的中文字符串，字符串仅支持单引号和双引号

2. jsx语法中

以下几种情况需注意，loader不支持也不处理以下情况

(1). <p>你好{this.calMethodl()}</p>,  不支持与表达式一起，引起的后果是将会提取“你好{this.calMethodl()}”作为翻译源

(2). 中文和元素标签不在同一行

 <p>   你好 </p>

(3). <p text="你好"></p>，props直接设置的文本不支持，可以改成<p text={"你好"}></p>

二、高级使用

配置 webpack 实现更多定制化功能

{
    // this loader will generate *.lang.json beside *.jsx files
    test: /\.(js|jsx)$/,
    exclude: [
        /(node_modules)|(\.next)/,
    ],
    use: {
        loader: "react-i18loader",
        options: {
            // The folder where store the language json file.
            // If storePath value is null or empty, the language json file would store corresponding to target js/jsx file
            storePath: "locales",

            // Required fields.
            // The langauages that you App supported
            languages: ["zh_Hans_CN", "zh_Hant_HK", "en_US"],


            // Optional fields.
            // The target component object where the loader will put a filed "$lang" in.
            method: "props", // It could be these three values: props, state, func 
            // The content to be translated. And the content must accord with this RegEx, default value is Chinese Simplified
            regText: "[\u4e00-\u9fa5\u3002\uff1b\uff0c\uff1a\u2018\u2019\u201c\u201d\uff08\uff09\u3001\uff1f\uff01\ufe15\u300a\u300b]+",
        }
    }
}

1. options中的属性 languages

它是一个数组，里面放了你需要将你的页面翻译成目标语言的语言标识，你可以添加任意的语言，比如日语（Ja_JP）等等，名字可以任意取，只要满足你的需求即可。

2. options中的属性 regText

它的值是一段正则表达式字符串，根据这个正则字符串，loader可以提取出匹配的文本作为翻译的源头。

比如你如果想提取出中文，你需要这样设置，那么你就可以在页面中直接写中文，loader会自动帮你提取出来：

 regText: "[\u4e00-\u9fa5\u3002\uff1b\uff0c\uff1a\u2018\u2019\u201c\u201d\uff08\uff09\u3001\uff1f\uff01\ufe15\u300a\u300b]+" 

利用这个正则字符串，你可以实现提取任意的语言。

3. options中的属性 method 

method属性只能是以下这三个值: props, state, func.它的默认值是 props.