❤
npm
Sign UpSign In

fis3-deploy-i18n-ejs

2.0.5 • Public • Published

fis3-deploy-i18n-ejs

A FIS3 plugin to generate html file with i18n data on deploy stage.

npm Build Status semantic-release tested with jest license

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)

Readme

Keywords

Package Sidebar

Install

npm i fis3-deploy-i18n-ejs

Repository

github.com/tonyc726/fis3-deploy-i18n-ejs

Homepage

github.com/tonyc726/fis3-deploy-i18n-ejs

Weekly Downloads

5

Version

2.0.5

License

MIT

Unpacked Size

38.6 kB

Total Files

20

Last publish

Collaborators

  • tonyc726
Try on RunKit
Report malware