使用 vve-i18n-cli 来一键式自动化实现国际化

背后的沉默

【Github：vue-viewer-editor/vve-i18n-cli】
这是我同事开发的国际化自动处理脚本，我进行过一次扩展，让其也支持我们一个 jQuery 老项目的国际化日常维护
至此，我们团队内的国际化均是使用该脚本来进行日常维护
该自动化脚本极大的为我们提效，基本将国际化的词条相关工作降低到 0 了，这意味着我们基本上不用特意留出太多时间来处理国际化方面的工作
但是，国际化其实不只有词条相关的工作，至于还有哪些工作，我之前发表过一篇《项目国际化的难点痛点是什么》里面吐槽得很清晰了
不可否认的是，如果没有这个自动化脚本，根本就没法在领导期望的时间内完成国际化的工作
自从有了这个脚本后，从以前的跟领导评估说要 4 天的国际化工作量到现在只评估了 1 天工作量，实际上跑下脚本分分钟就解决了，我还可以愉快的滑一天水，领导开心，我也开心~
自动化脚本能力

检查项目里是否存在不合理的编程方式，如中文做 key 值等

上述示例命令运行结果呈现：
{"type":"script-pre","text":"这里也可能有中文，还用不了this上下文"}
{"type":"props","text":"这里的中文也用不了this上下文"}
{"type":"zh-key","text":"中文"}
script-pre 场景是说发现有中文存在于 script 标签内，这部分代码运行在 js 模块作用域内，this 指向不是 vue 组件，包裹 this.$t 的话会导致程序异常，所以要先手动处理下，能下沉就下沉，否则就先手动用全局函数包裹，然后忽略这个处理
props 场景是说发现有中文存在于 vue 的 props 字段里，这里也无法访问 this，会报异常，建议这块更改成 computed 用法
zh-key 场景是说发现中文做 key 值，需要用户确认是否能被翻译处理
这个命令可以提前主动的发现代码里的国际化处理问题，避免将问题遗留到测试或线上阶段
标记无需处理的词条

总有些场景，你希望这个中文词条不要被国际化处理，这时候可以类似 es-lint 的忽略配置一样，既可以忽略整个文件，也可以忽略文件中的某个词条
在 vve-i18n-cli.config.js 里增加下忽略配置规则：

1. // vve-i18n-cli.config.js
2. module.exports = {
3.   // 国际化文本包裹相关
4.   zhWrap: {
5.     // 需要过滤的文件
6.     ignoreI18nFileRules: [],
7.     // 需要处理的文件
8.     i18nFileRules: ["!(node_modules|config|statsvnTmp)/**/*.+(js|vue)"],
9.     // 当词条前缀出现以下正则时，该词条过滤不处理
10.     ignorePreReg: [
11.       /t\s*\([\s\n]*$/, //  词条在 t( 方法内的不处理，$t() 符合该规则
12.       /console\.(?:log|error|warn|info|debug)\s*\(\s*$/, //  词条在 console.xxx 方法内的不处理，过滤掉日志内的中文处理
13.       new RegExp("//.+"), // 注释中的词条不处理
14.       new RegExp("i18n-disabled.+"), // 词条前面出现 i18n-disabled 关键词的不处理
15.     ],
16.   },
17. };

复制代码

然后代码中这些场景就不被处理了：

1. const ZH_KEY = /*i18n-disabled*/ "出现忽略处理的关键词的词条也不会被处理";
2. // 注释里中文不会被处理
3. console.error("日志里的中文也不会被处理");

复制代码

自动对各种场景的中文词条包裹翻译函数

当检查完代码基本没问题，也配置了需要忽略处理的词条文件后，就可以通过命令自动对中文词条进行包裹翻译函数处理了：

不管你项目文件有成百上千个，都是一个命令就自动完成国际化翻译函数包裹词条处理
包裹哪些文件、包含的翻译函数名，不同场景（js 里，vue 里）用什么函数包裹，js 里是否需要加入 import 引入包含函数的代码，哪些文件不处理，哪些词条不处理，哪些前缀标记的不处理等等
以上场景都是通过 vve-i18n-cli.config.js 配置文件处理，详情查看下面章节，有默认的配置，你也可以根据你项目需要进行自己诉求的配置
脚本不是写死的行为，通过不同配置，可以适应到各种项目里去使用，目前我们团队的老项目，新项目，各种项目就通过各自项目的配置来接入了这个国际化自动处理脚本
自动将所有词条提取到 json 文件中（按模块维护）

当项目完成的国际化包裹词条处理后，就可以接着下一步，把词条提取到 json 文件里了：

想机翻，可以，默认不翻译，只做提取
想按模块提取到不同 json 文件里，可以，配置下模块规则
想生成多份语言的 json，可以，默认只有 zh.json, en.json
国际化的词条工作无外乎就是词条包裹处理，词条提取，词条翻译
这些工作难度不大，但工作量大，借助这类国际化自动处理脚本，就可以极大的提高效率，开心的滑水了
如何使用

安装

npm install vve-i18n-cli -D
package 里添加脚本命令，简化命令使用

1. {
2.   "scripts": {
3.     "i18n": "vve-i18n-cli",
4.     "i18n-wrap": "vve-i18n-zh-wrap-cli",
5.     "i18n-check": "vve-i18n-zh-check-cli"
6.   }
7. }

复制代码

根目录下创建配置文件 vve-i18n-cli.config.js

1. // vve-i18n-cli.config.js
2. module.exports = {
3.   // 工作目录
4.   cwd: ".",
5.   // 根目录，国际文本所在的根目录
6.   rootDir: "src",
7.   // 默认所有模块，如果有传module参数，就只处理某个模块
8.   // '**/module-**/**/index.js'
9.   moduleIndexRules: ["."],
10.   // 忽略模块
11.   ignoreModuleIndexRules: [],
12.   // 匹配含有国际化文本的文件规则
13.   i18nFileRules: ["**/*.+(vue|js)"],
14.   // 不匹配含有国际化文本的文件规则
15.   ignoreI18nFileRules: [],
16.   // 国际化文本的正则表达式，正则中第一个捕获对象当做国际化文本
17.   i18nTextRules: [/(?:[\$.])t\([\s\n]*['"](.+?)['"]/g],
18.   // 模块的国际化的json文件需要被保留下的key，即使这些组件在项目中没有被引用
19.   // 规则可以是一个字符串，正则，或者是函数
20.   keepKeyRules: [
21.     /^G\/+/, // G/开头的会被保留
22.   ],
23.   // 忽略国际化KEY的规则
24.   // 规则可以是一个字符串，正则，或者是函数
25.   ignoreKeyRules: [],
26.   // 生成的国际化资源包的输出目录
27.   outDir: "lang",
28.   // 生成的国际化的语言
29.   i18nLanguages: [
30.     "zh", // 中文
31.     "en", // 英文
32.   ],
33.   // 配置文件的路径，没有配置，默认路径是在${cwd}/vve-i18n-cli.config.js
34.   config: undefined,
35.   // 是否取配置文件
36.   disableConfigFile: false,
37.   // 是否翻译
38.   translate: false,
39.   // 翻译的基础语言，默认是用中文翻译
40.   translateFromLang: "zh",
41.   // 是否强制翻译，即已翻译修改的内容，也重新用翻译生成
42.   forceTranslate: false,
43.   // 翻译的语言
44.   translateLanguage: ["zh", "en"],
45.   // 非中文使用拼音来来翻译
46.   translateUsePinYin: false,
47.   // 模块下${outDir}/index.js文件不存在才拷贝index.js
48.   copyIndex: false,
49.   // 是否强制拷贝最新index.js
50.   forceCopyIndex: false,
52.   // 国际化文本包裹相关
53.   zhWrap: {
54.     cwd: ".",
55.     // 根目录，国际文本所在的根目录
56.     rootDir: ".",
57.     ignoreI18nFileRules: [],
58.     i18nFileRules: ["!(node_modules|config|statsvnTmp)/**/*.+(js|vue)"],
59.     ignorePreReg: [
60.       /t\s*\([\s\n]*$/,
61.       /tl\s*\([\s\n]*$/,
62.       /console\.(?:log|error|warn|info|debug)\s*\(\s*$/,
63.       /\/\/\s*$/,
64.       new RegExp("//.+"),
65.       new RegExp("i18n-disabled.+"),
66.     ],
67.     ignoreText: ["^[\\u4e00-\\u9fa5a-zA-Z0-9“._=,':;*#！”-]+$"],
68.     // js相关文件需要引入的国际化文件
69.     i18nImportForJs: "",
70.     // js相关文件需要使用国际化方法
71.     jsI18nFuncName: "$i18n.$t",
72.     // vue相关文件需要使用的国际化方法
73.     vueI18nFuncName: "$t",
74.   },
75.   zhCheck: {
76.     cwd: ".",
77.     // 根目录，国际文本所在的根目录
78.     rootDir: ".",
79.     ignoreI18nFileRules: [],
80.     i18nFileRules: ["!(node_modules|config|statsvnTmp)/**/*.+(vue|js)"],
81.     // 反引号中需要忽略的文本规则，可以是正则或者字符串
82.     ignoreTextInQuoteRules: [/t\(/],
83.   },
84. };

复制代码

先检查是否存在不合理的代码实现

npm run i18n-check
再执行自动对词条包裹翻译函数的命令

npm run i18n-wrap
最后把这些被翻译函数包裹的词条提取到 json 文件里

npm run i18n
这份脚本很通用化，根据各自配置规则，可以适应到各种项目里面，实在不行，代码也是开源的，拉下来修修改改得了
扩展

我们团队的翻译不是机翻，而是有专门的翻译团队进行翻译，因此提取完 json 词条后，还需要用 excel 跟翻译团队打交道
所以可以来扩展下几个脚本
提取未翻译词条到 excel 文件中

1. /**
2. * 抽取未翻译的词条到excel文件中
3. */
4. const map = require("map-stream");
5. const path = require("path");
6. const vfs = require("vinyl-fs");
7. const XLSX = require("xlsx");
9. const ROOT_DIR = path.resolve("./");
10. const fileRules = [
11.   "**/*/i18n/en.json",
12.   // "**/eweb-setting-planningDeployment/i18n/en.json",
13. ];
15. const writeExcel = (arr, name = "未翻译词条") => {
16.   const sheet_data = arr.map((v) => {
17.     return {
18.       中文: v,
19.       English: "",
20.     };
21.   });
22.   const new_sheet = XLSX.utils.json_to_sheet(sheet_data);
23.   // // 创新一个新的excel对象，就是workbook
24.   const new_workbook = XLSX.utils.book_new();
25.   // // 将表的内容写入workbook
26.   XLSX.utils.book_append_sheet(new_workbook, new_sheet, "sheet1");
27.   XLSX.writeFile(new_workbook, `${name}.xlsx`);
28. };
30. function run() {
31.   const zhList = [];
32.   console.log("================================>start", ROOT_DIR);
33.   vfs
34.     .src(
35.       fileRules.map((item) => path.resolve(ROOT_DIR, item)),
36.       {
37.         ignore: ["node_modules/**/*", "statsvnTmp/**/*"],
38.       }
39.     )
40.     .pipe(
41.       map((file, cb) => {
42.         console.log("处理文件 =========================>", file.path);
44.         let fileContent = file.contents.toString();
45.         fileContent = JSON.parse(fileContent);
46.         Object.keys(fileContent).map((zh) => {
47.           if (zh.match(/[\u4E00-\u9FFF]/)) {
48.             if (zh === fileContent[zh]) {
49.               // 未翻译
50.               zhList.push(zh);
51.             }
52.           }
53.         });
54.         cb();
55.       })
56.     )
57.     .on("end", () => {
58.       const uniZh = Array.from(new Set(zhList));
59.       writeExcel(uniZh);
60.       console.log("未翻译词条数量：", uniZh.length);
61.       console.log(
62.         "================================>end",
63.         "根目录下生成 excle 文件"
64.       );
65.     });
66. }
68. run();

复制代码

将 excel 中的词条回填到 json 文件中

1. /**
2. * 将翻译后的内容替换到en.json文件中
3. */
4. const map = require("map-stream");
5. const path = require("path");
6. const vfs = require("vinyl-fs");
7. const fs = require("fs");
8. const XLSX = require("xlsx");
10. const ROOT_DIR = path.resolve("./");
11. const fileRules = ["**/*/i18n/en.json"];
12. // 文件名称 默认名称 resource.json
13. const fileName = "resource";
14. const fileJsonName = fileName + ".json";
15. const fileXlsName = fileName + ".xlsx";
17. const excelReader = (exlcePathArray = []) => {
18.   if (!Array.isArray(exlcePathArray)) {
19.     exlcePathArray = [exlcePathArray];
20.   }
21.   const obj = {};
22.   for (const i in exlcePathArray) {
23.     if (Object.hasOwnProperty.call(exlcePathArray, i)) {
24.       const excleFilePath = exlcePathArray[i];
25.       console.log("读取excle " + excleFilePath);
26.       const workbook = XLSX.readFileSync(excleFilePath, {
27.         type: "binary",
28.       });
29.       for (const sheet in workbook.Sheets) {
30.         const dataArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheet]);
31.         obj[sheet] = dataArray;
32.       }
33.     }
34.   }
35.   return obj;
36. };
38. // 如果未找到 resource.json 查找 excel文件
39. if (!fs.existsSync(path.resolve(ROOT_DIR, fileJsonName))) {
40.   // 判断resource.excel是否存在
41.   if (fs.existsSync(path.resolve(ROOT_DIR, fileXlsName))) {
42.     let fileObj = excelReader(path.resolve(ROOT_DIR, fileXlsName));
43.     let dataObj = {};
44.     if (fileObj.sheet1) {
45.       // 中文列存在 例子： {"中文":"下载中...","English":"down…"}
46.       for (let i = 0; i < fileObj.sheet1.length; i++) {
47.         let itemZhKey = fileObj.sheet1[i]["中文"];
48.         let itemEnKey = fileObj.sheet1[i]["English"];
49.         if (itemZhKey && itemEnKey) {
50.           dataObj[itemZhKey] = itemEnKey;
51.         }
52.       }
53.     }
54.     // 获取sheet1的内容
55.     const data = JSON.stringify(dataObj);
56.     try {
57.       fs.writeFileSync(path.resolve(ROOT_DIR, fileJsonName), data);
58.     } catch (error) {
59.       console.log("生成文件 resource.xlsx 异常");
60.       throw error;
61.     }
62.   } else {
63.     console.log("不存在文件 resource.xlsx");
64.     throw new Error("不存在文件 resource.xlsx");
65.   }
66. }
68. const originResource = require(path.resolve(ROOT_DIR, fileJsonName));
69. let resource = Object.assign({}, originResource);
70. Object.keys(originResource).map((key) => {
71.   resource[`${key}：`] = `${originResource[key]}：`;
72.   resource[`${key}:`] = `${originResource[key]}:`;
73.   resource[`${key}）`] = `${originResource[key]}）`;
74.   resource[`${key})`] = `${originResource[key]})`;
75.   resource[`${key} `] = `${originResource[key]} `;
76.   resource[` ${key}`] = ` ${originResource[key]}`;
77.   resource[`(${key}`] = `(${originResource[key]}`;
78.   resource[`（${key}`] = `（${originResource[key]}`;
79.   resource[` ${key} `] = ` ${originResource[key]} `;
80. });
82. function run() {
83.   console.log("================================>start", ROOT_DIR);
84.   let failedCount = 0;
85.   let successCount = 0;
86.   let failedZhs = [];
87.   vfs
88.     .src(
89.       fileRules.map((item) => path.resolve(ROOT_DIR, item)),
90.       {
91.         ignore: ["node_modules/**/*", "statsvnTmp/**/*"],
92.       }
93.     )
94.     .pipe(
95.       map((file, cb) => {
96.         console.log("处理文件 =========================>", file.path);
98.         let fileContent = file.contents.toString();
99.         fileContent = JSON.parse(fileContent);
100.         let hasChange = false;
101.         Object.keys(fileContent).map((zh) => {
102.           if (zh.match(/[\u4E00-\u9FFF]/)) {
103.             if (zh === fileContent[zh]) {
104.               // 未翻译
105.               if (resource[zh] && resource[zh] !== zh) {
106.                 hasChange = true;
107.                 fileContent[zh] = resource[zh];
108.                 successCount++;
109.               } else {
110.                 failedCount++;
111.                 failedZhs.push(zh);
112.               }
113.             }
114.           }
115.         });
116.         if (hasChange) {
117.           fs.writeFileSync(
118.             file.path,
119.             JSON.stringify(fileContent, " ", 2) + "\n"
120.           );
121.         }
122.         cb();
123.       })
124.     )
125.     .on("end", () => {
126.       fs.writeFileSync(
127.         "unHandle.json",
128.         JSON.stringify(failedZhs, " ", 2) + "\n"
129.       );
130.       console.log("本次翻译成功词条数量：", successCount);
131.       console.log("还剩余未翻译词条数量：", failedCount);
132.       console.log("================================>end");
133.     });
134. }
136. run();

复制代码

来源:https://www.cnblogs.com/dasusu/p/17947193
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！