UNPKG

2.87 kBMarkdownView Raw
1# 多语言 (i18n)
2
3## 配置方式
4
5在执行构建方法时，传入 `i18n` 对象。例：
6
7```javascript
8// [构建文件] ./super.build.js
9
10const superBuild = require('super-project/core/webpack/enter')
11
12/*
13 * 其他代码
14 */
15
16superBuild({
17 /*
18 * 其他配置对象
19 */
20 i18n: [
21 ['zh-cn', './locales/zh-cn.json'],
22 ['zh', './locales/zh.json'],
23 ['en', './locales/en.json']
24 ]
25})
26```
27
28## 配置说明
29
30`i18n` 对象有2种配置方法
31
32### 简易配置
33
34```javascript
35const i18n = [
36 ['zh-cn', './locales/zh-cn.json'],
37 ['zh', './locales/zh.json'],
38 ['en', './locales/en.json'],
39 // [语言ID, 语言包JSON文件的相对路径]
40]
41```
42
43### 高级配置
44
45```javascript
46const i18n = {
47 // i18n模式，可选
48 // 当前可用值：'default' || 'redux'
49 // [默认值] prod环境：default | dev环境：redux
50 type: 'default',
51
52 // i18n方法名，可选
53 // [默认值] __
54 expr: '__',
55
56 // cookie 中使用键值
57 // [默认值] spLocaleId
58 cookieKey: 'spLocaleId',
59
60 // cookie 影响的域
61 // [默认值] 无
62 domain: '.domain.com',
63
64 // 语言包，必填
65 // 参照简易模式配置
66 locales: [
67 ['zh-cn', './locales/zh-cn.json'],
68 ['zh', './locales/zh.json'],
69 ['en', './locales/en.json'],
70 // [语言ID, 语言包JSON文件的相对路径]
71 ]
72}
73```
74
75## 使用
76
77在项目种，使用 `__(key[, key2, key3, ...[, { option1: value1 }])` 方法即可输出/渲染对应的多语言文本。方法名（默认为 `__`）可使用高级方式进行配置。
78
79### 示例
80
81```javascript
82__('About')
83__('timestamp_now', { time: Date.now() })
84__('header.nav.home')
85__('header.nav', 'home')
86__('header', 'nav.home')
87__('header', 'nav', 'home')
88__('header', 'nav', 'home', { key: 'value' })
89__('header', 'nav', currentKey)
90__('header', 'nav', currentKey, { key: 'value' })
91__('header', key1, key2)
92```
93
94### 选项
95
96如果最后一个参数为 `Object` 则表示选项。语言包字符串种的 `${key}` 会使用对象内对应的元素进行替换，例：
97
98```javascript
99// 语言包
100{
101 "timestamp_now": "当前时间戳: ${time}"
102}
103
104// 使用
105__('timestamp_now', { time: Date.now() })
106```
107
108### 多级
109
110语言包JSON支持无限多级。在使用时，每一级之间可用 `.` 连接，或在 `__()` 方法中连续写入每一级的 key 值，例：
111
112
113```javascript
114// 语言包
115{
116 "header": {
117 "nav": {
118 "home": "Home",
119 "About": "About Me"
120 }
121 }
122}
123
124// 使用
125__('header.nav.home')
126__('header.nav', 'home')
127__('header', 'nav', 'home')
128__('header', 'nav.home')
129// 以上方法结果相同：Home
130```
131
132**注**：在 `default` 模式下使用多级模式时，`__()` 方法的第一个变量中尽量多的使用 `.` 连接，以得到最佳效果。如上例中推荐前2个使用方式。