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.

valuedescription
propsloader将会添加一个属性$lang至对应的React组件的Props中,你需要更改props.$lang来切换多语言,详情请看set_lang_via_props例子。
stateloader将会添加一个属性$lang至对应的React组件的state中,你需要更改state.$lang来切换多语言,详情请看set_lang_via_state例子。
func你需要添加一个方法$getLang() {return XXX; // The language code like 'zh_Hans_CN' }到你的React组件中。 详情请看set_lang_via_func例子。
工具
加载中...
⌘+Return 发表
发表
评论(1)
时间
W
Winter
1 · 2019-04-25 11:52:48

react-i18loader 运用案例,请访问:在线API文档 http://doc.samyoc.com

Winter

在线API文档 http://doc.samyoc.com  已经和主站整合,请访问https://www.samyoc.com 查看react-i18loader 运用案例

2020-04-16 23:35:09回复举报

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序

App下载

NPM
GitHub

如果你觉得对你有帮助的话,可以请我喝杯咖啡噢~