fis3-deploy-i18n-ejs
v2.0.5
Published
A fis3 plugin to generate intl file with i18n language file and template file on deploy stage.
Downloads
13
Readme
fis3-deploy-i18n-ejs
A FIS3 plugin to generate html file with i18n data on deploy stage.
Thanks for fis3-deploy-i18n-template
在前端的工程构建工具FIS3发布阶段,将所有拥有isHtmlLike: true
的文件包含的多语言标记替换成指定内容,并生成文件的插件。
使用说明
如何安装
yarn add fis3-deploy-i18n-ejs -D
# OR
npm install fis3-deploy-i18n-ejs -D
默认配置
/**
* @type {Object} DEFAULT_CONFIG - 插件默认配置
* @property {string} [open='<%'] - ejs模板的起始标识符
* @property {string} [close='%>'] - ejs模板的结束标识符
* @property {string} [dist='i18n/$lang/$file'] - 编译后的输出路径,相对于release的根目录,其中`$lang`代表语言文件夹,`$file`代表编译的文件
* @property {string} [templatePattern=''] - 需要做多语言处理文件subpath的glob规则,默认为所有html文件
* @property {string} [defaultLangName=''] - 默认语言名字,如果匹配默认语言,该语言的输出将自动去除dist中的`$lang`部分
* @property {string} [i18nPattern='translations/*.{js,json}'] - 多语言文件的glob规则
* @property {string} [ignorePattern=''] - 需要忽略编译的glob规则
* @property {string} [noKeepSubPathPattern=''] - 不需要保持原有目录结构输出的glob规则
* @property {function} [onLangFileParse=noop] - 在读取多语言文件后的自定义处理函数,其返回值会与当前读取的文件内容合并
*/
{
open: '<%',
close: '%>',
dist: 'i18n/$lang/$file',
templatePattern: '',
defaultLangName: '',
i18nPattern: 'translations/*.{js,json}',
ignorePattern: '',
noKeepSubPathPattern: '',
/**
* @desc 多语言文件处理函数
* @param {string} i18nFileJSONClone - 语言文件内容(JSON格式)的拷贝对象
* @param {string} fileLangName - 当前语言文件对应的语言名字
* @param {string} defaultLangName - 默认语言名字
* @return {object} 处理以后的文件内容
*
* @example
* onLangFileParse(i18nFileJSONClone, fileLangName, defaultLangName) {},
*/
onLangFileParse: noop,
}
参考示例
具体的实验可以参考这个项目fis3-examples。
项目目录结构
# project root path
│
├── i18n-folder # 文件名及语言名
│ ├── en.json
│ ├── zh.json
│ └── ...
│
├── template-folder
│ ├── index.html
│ ├── ...
│ └── sub-folder
│ ├── detail.html
│ └── ...
│
├── fis-conf.js
│
└── package.json
配置fis-conf.js
中fis3-deploy-i18n-ejs
相关的内容
// ------ translations ------
fis.match('/i18n-folder/**', {
release: false,
});
// ------ templates ------
fis.match('/template-folder/(**)/(*.html)', {
release: '/$1/$2',
});
// ------ deploy ------
fis.match('**', {
deploy: [
fis.plugin('i18n-folder', {
open: '<%',
close: '%>',
dist: '$lang/$file',
defaultLangName: 'zh',
templatePattern: '',
i18nPattern: 'i18n-folder/*.json',
ignorePattern: '',
noKeepSubPathPattern: '',
onLangFileParse() {},
}),
],
});
i18n-folder
中的文件内容示例
i18n-folder/en.json
{
"hello": "hello",
"world": "world"
}
i18n-folder/zh.json
{
"hello": "你好",
"world": "世界"
}
template-folder
待转换的模板文件夹
template-folder/index.html
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<p><%= hello %></p>
<p><%= world %></p>
</body>
</html>
template-folder/sub-floder/detail.html
<html>
<head>
<meta charset="UTF-8">
<title>detail</title>
</head>
<body>
<p><%= hello %></p>
<p><%= world %></p>
</body>
</html>
输出结果
语言为zh
的输出结果:
默认语言为
zh
,所以输出的文件去除$lang
层级的目录,即
dist/index.html
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<p>你好</p>
<p>世界</p>
</body>
</html>
dist/sub-folder/detail.html
<html>
<head>
<meta charset="UTF-8">
<title>detail</title>
</head>
<body>
<p>你好</p>
<p>世界</p>
</body>
</html>
语言为en
的输出结果:
dist/en/index.html
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<p>hello</p>
<p>world</p>
</body>
</html>
dist/en/sub-folder/detail.html
<html>
<head>
<meta charset="UTF-8">
<title>detail</title>
</head>
<body>
<p>hello</p>
<p>world</p>
</body>
</html>
参考
- node-project-kit - 快速创建项目的模板
- glob - 使用 glob 语法获取匹配文件的工具
- ejs - 模板引擎
License
Copyright © 2017-present. This source code is licensed under the MIT license found in the LICENSE file.
Made by Tony (blog)