前端国际化自动工具 - 国际化文案配置系统

已于 2024-08-07 02:11:40 修改
阅读量737 收藏 20
点赞数 27
文章标签： 前端 自动化 node.js
于 2024-08-07 01:51:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AlbertLin_shu/article/details/140969587
版权

背景

笔者之前所在的公司主要做东南亚和欧洲一些国家的业务，做的是 Web 后台管理系统，项目被不同国家（有的项目多达七八个国家）的客户使用，所以前端项目需要支持多语言展示，也就是适配国际化。

日常编码中，系统需要接入前端 web 国际化插件，vue 项目使用的是 vue-i18n，而 react 项目使用 react-i18next，这些插件原理都是根据前端提供的一套语言包json文件（例如en-US.json，zh-CN.json）, 每份语言包都以key：value对象形式存储代码标记：实际渲染的语言文案一一对应的数据，然后插件根据用户的语言切换，替换展示不同的语言。

其中，语言包中 的 key 值可以是直接的中文文案：确定 或者是 类似 ：menu.dashboard.confirm 的字符串。通常情况下，如果业务没有特殊要求，为了方便业务代码的阅读，我们直接使用中文文案做为语言包的key值。

面临的问题

这里面多语言的切换展示都能由 i18n 插件帮我们处理，但是，有一个问题是比较麻烦的，那就是如何提取、收集、整理、翻译、录入这些文案，很多时候，这些都是手工完成。通常，在业务代码完成后，项目的文案key需要前端开发提取，整理，收集后，供翻译人员进行翻译，添加多国语言，然后经过校对和审核，再通过前端开发导入到项目代码中，此过程往往非常重复繁琐，存在工作效率低，又容易出错的问题。

刀耕火种

最开始，前端开发是写完需求业务代码，然后整理这次需求的页面上需要被翻译的文案，整理后放在谷歌文档excel表格上，然后呼叫翻译小组的小姐姐们进行翻译，待翻译结束，再经过审核校对，前端开发又手动录入到代码里，其过程极为繁琐，前端开发不只需要一个个找出文案，最后还得一个个录入到语言包json文件里，像我们有时候一个需求迭代里面有几百个文案，整理过程可谓又辛苦又无聊，过程大概如下图所示：

在这里插入图片描述

农业时代

后来，组里的同事终于受不了，利用xlsx.js撸了一个nodejs插件，在录入这一步上，不再手工一个个敲进去，而是通过插件将翻译好的文案excel数据转换生成新的语言包文件（zh-CN.json，en-US.json等等）。这样虽然简化了录入过程，但是还会面临以下几个问题：

  • 系统分开语言包各个模块，每次需求都是用独立的语言包文件，这样，系统就会有多个语言包数据冗余。比如，每个页面都几乎有“确定”，“取消”这些文案，每次都需要重复录入，到了翻译阶段，翻译人员就需要多次翻译同一个文案
    在这里插入图片描述

  • 翻译、整理、校对、审核的过程依赖于谷歌文档，每次需求都是新的文档，这样查找起来麻烦复杂

  • 待翻译完成后，前端开发得登录文档下载excel文件，然后启动插件，生成json语言包

  • 项目文案如果有临时修改，前端开发得登录谷歌文档对文案key进行修改，同时通知到翻译人员，待翻译人员同步修改后，再重新执行上面一步操作

  • 系统的语言包文案key的提取还是得前端开发一个个敲进去，过程极度无聊，而且还会不小心打错字

工业时代

于是，针对上述的问题，是否可以开发出一个系统，能达到以下的工作效果呢？

  • 提取文案自动化，无需前端开发手工录入
  • 独立的公司内部文案配置系统，支持翻译人员在线录入文档，不依赖于谷歌文档
  • 录入文案自动化，无需前端开发手动下载、移动到项目代码里面
  • 录入文案时，能实时diff新旧语言包文件差异，让前端开发知道本次新增、修改，删除了多少文案
  • 支持文案进行模块区分，比如需求a有文案xxx，xxxx，文案xxx隶属于需求a和需求b
  • 支持excel、json格式语言的导入和导出
  • 文案新增/修改/删除 有操作历史记录，可以随时查看某个文案什么时候被编辑过，翻译人员某个时候修改了哪个文案的内容

总而言之，就是希望有一套系统，能够把国际化这套流程工作通过程序自动完成，而作为前端开发，能够不处理或者少处理相关的工作，就像写国内的中文项目一样，直接写中文文案，系统自动处理国际化，达到无感知开发多语言国际化项目的目的

于是，便有了这套自动国际化文案配置系统。

自动国际化文案配置系统

架构

系统架构如图所示：

在这里插入图片描述

其中，文案解析器结构为

在这里插入图片描述

其系统运行流程是：

  1. 翻译人员打开 自动国际化文案配置系统 前端页面
  2. 每当前端页面进行刷新，页面会调用接口，通知系统后台进行业务项目源代码的拉取和更新
  3. 对应地，系统后台执行更新业务项目源代码，并使用文案解析器对源代码进行解析，自动读取收集业务代码的中文文案 key，再经过系统整理、去重后，同步进数据库
  4. 系统后台将收集到的中文文案 key 回传到系统前端页面
  5. 翻译人员进行文案的翻译、修改、更新、删除等操作
  6. 翻译人员完成翻译工作后，通知到前端开发人员
  7. 前端开发人员手动下载已经翻译好的文案json，导入到业务代码里；或者可接入辅助插件 @mango-scripts/i18n-scripts 进行一键下载导入

可以看到，这个过程，作为前端开发，无需参与其中文案的提取工作，从繁杂无聊的文案 key 的提取中解放出来，而最后的文案录入工作，也有辅助插件一键完成

那么，作为前端开发，只需要在业务项目的初期，一键部署接入该自动国际化文案配置系统，然后，在需求代码编写中，就像国内的中文项目一样，文案 key 使用中文，每次业务代码完成时，通知翻译人员进行文案翻译，待翻译工作结束后，执行项目辅助脚本，一键更新翻译文案到本地项目里面

系统预览

以下是系统部分预览图

登录页面

在这里插入图片描述

管理员账号注册页面

系统注册默认邀请码：mango-i18n-system-invitation-code ,可用于管理员账户的注册，可在项目部署前修改

在这里插入图片描述

文案配置页面

在这里插入图片描述

添加翻译词条

在这里插入图片描述

操作记录页面

在这里插入图片描述

人员配置

在这里插入图片描述

解析配置
在这里插入图片描述

账户设置

在这里插入图片描述

系统特性

  • 自动拉取业务项目源代码
  • 自动提取业务项目代码中文文案 key 到系统中
  • 支持使用辅助插件 @mango-scripts/i18n-scripts 进行一键下载、导入语言包到业务项目本地代码中
  • 支持用户管理、操作记录 等常规后台管理系统功能，方便对文案变更作全流程跟踪
  • 支持正则表达式、AST两种解析方式
  • 支持vue、js、jsx、mjs、ts、tsx、mts、svelte等多种格式文件
  • 支持配置文案模块标识，配置无需提取的文案等功能
  • 支持文案的 excel、json 等格式的上传以及下载
  • 系统使用文件 hash 进行缓存，未修改过的业务代码文件不作解析，提高解析速度
  • 部署方便快捷，提供 docker 镜像，可使用部署脚本一键部署

系统技术栈

  • 系统前后端全栈 采用 TypeScript 进行编写
  • 文案解析器：@mango-scripts/i18n-utils：基于 babel、vue-template-compiler、hyntax、pug、svelte/compiler 等 对目标源码进行 AST 解析与提取
  • 辅助插件：@mango-scripts/i18n-scripts：基于 commander、fs-extra、glob、inquirer、undici 等
  • 系统前端基于 react@18、react-router@6、zustand、antd@5、echarts、react-json-view、nginx、rsbuild 等
  • 系统后台主要采用 nestjs 全家桶 以及 typeorm、execa、exceljs、glob、jsonwebtoken，tsup 等
  • 数据库方案采用轻量级数据库 splite3
  • 项目部署基于 docker，使用 docker-compose 一键部署

系统部署和使用

只需要简单两步即可部署好系统

部署
第一步

准备一台公司内部空闲的服务器，下载docker以及docker-compose（如已安装可忽略该步骤）

docker 和 docker-compose 可参考 菜鸟教程 进行安装：

  1. docker 安装：https://www.runoob.com/docker/ubuntu-docker-install.html
  2. docker-compose 安装：https://www.runoob.com/docker/docker-compose.html
第二步

在服务器上随便找一个空目录，例如：/home/app/i18n/ ，进入该目录执行以下安装命令

## 进入目录
cd /home/app/i18n/

## 使用 bash 执行安装脚本
bash -c "$(curl https://raw.githubusercontent.com/AlbertLin0923/mango-i18n-system/main/install.sh)"

根据提示，输入：

  1. 系统客户端部署的端口（默认：80）
  2. 系统服务端部署的端口（默认：8080）
  3. 用于管理员注册的邀请码（也就是注册密钥，建议输入自定义的密钥并保存好密钥）（默认：mango-i18n-system-invitation-code）

接着脚本会远程拉取docker镜像并启动安装

脚本执行完毕后，这时候打开服务器对应的项目端口，例如：http://host:port/user/login （ host 为该内网服务器 IP 地址，port 为我们刚才设置的客户端的端口） 就可以看到项目已经启动✅

配置

此时,进入项目地址, 应该能看到项目已经部署好了

  1. 登录 http://host:port/user/login 进行账户的注册或者登录

系统注册默认邀请码（注册密钥）：mango-i18n-system-invitation-code ,可用于管理员账户的注册，可在项目部署时候进行更改

  1. 登录后 进入 系统配置-人员配置 系统配置-界面配置 系统配置-解析配置 进行项目配置
业务系统接入（可选）
  1. 如上文提到，编码过程需要以 中文 作为文案，具体使用可参考 该项目mango-i18n-system/packages/client 代码
  2. 业务项目 下载脚本插件 pnpm add @mango-scripts/i18n-scripts -D，
  3. 业务项目package.json里添加更新指令：
"scripts": {
  "updateLocale": "i18n-scripts updateLocale -f http://xxx/api/locale/get_locale_map -o ./src/locales/common/ -l zh-CN en-US id-ID"
}

其中

-o 参数为 在业务项目里存储语言包的目录地址，例如：./src/locales/common/
-f 参数为 部署的服务器的地址和端口，例如：http://xxx/api/locale/get_locale_map
-l 参数为 需要下载的语言包列表，例如：zh-CN en-US id-ID
  1. 当需要更新语言包的时候，只需要执行pnpm run updateLocale即可
更多配置（可选）
配置文案模块标识

系统支持文案添加模块标识，可通过如下注释进行标识：

例如：在目标 src/views/xxx/index.vue文件最上面加注释：

<!-- translateModules:["需求2022009","需求2020102"] -->

或者，在 src/utils/request.ts文件最上面添加注释：

// translateModules:["需求2022009","需求2020102"]

系统会自动读取模块标识，该文件下的所有提取到的中文 key 文案，都将带有属性 modules:'需求2022009,需求2020102'，方便在系统前端上进行区分和筛选

配置无需提取的文案

系统会默认不提取业务代码的注释的中文。但有些时候，我们一些未被注释的特殊的中文文案 key 也不想出现在自动文案配置系统前端页面上，这时候，我们可以在 AST 解析模式下，支持类似eslint-disable的注释效果，以注释不需要提取的中文文案 key


// 这种注释引擎会忽略整个文件中文文案key的提取，优先级最高
// translate-disable-entire-file

const getFilterStatusMap = (statusMap, type) => {
  if (type === 'pendingCase') {
    return statusMap.filter((i) => {
      return (
        // 这种注释引擎会忽略提取中间包裹的代码段中的中文文案key
        // translate-disable
        i.text === '待处理' ||
        i.text === '处理中'
        // translate-disable
      )
    })
  } else if (type === 'allCase') {
    return statusMap.filter((i) => {
      return (
        // 下面注释引擎会忽略提取 下一行 代码的中文文案key
        // translate-disable-next-line
        i.text === '已处理'
      )
    })
  } else if (type === 'myCase') {
    return statusMap.filter((i) => {
      return (
        // 下面注释引擎会忽略提取 当前行 代码的中文文案key
        i.text === '无需处理' || // translate-disable-line
      )
    })
  }  else {
    return statusMap
  }
}

项目二次开发

本地启动与开发调试
  1. clone 系统代码到本地
  2. cd 到 项目根目录，执行 pnpm i，安装依赖包
  3. cd 到 packages/server ，执行pnpm dev ，启动服务端
  4. cd 到 packages/client，执行pnpm dev，启动客户端
  5. 根据命令行的提示，这时候打开 http://localhost 即可看到项目已经启动了😄
使用源码进行本地部署

项目二次开发后，可托管到自己的代码仓库，然后在服务器上通过源码部署：

  1. 准备一台公司内部空闲的服务器，下载 docker 以及 docker-compose
  2. 在服务器上找一个空目录，例如：/home/app/i18n/ ，进入该目录，克隆该项目源码到目录里面
  3. 执行 docker-compose up -d 进行一键部署
  4. 其他配置同上

源码

项目源码地址

TODO List

  • 文案解析器支持更多格式的文件

参考资料

Kiwi-国际化全流程解决方案

聊聊前端国际化文案该如何处理

如何快速解决繁杂的国际化替换

字节前端如何基于 AST 做国际化重构？

astexplorer

AlbertLin0923
关注
  • 27
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自己写的前端小知识分享文案
01-25
Vue-cli 提供了许多有用的特性，例如项目模板、插件系统、自动配置等，可以快速构建一个 Vue.js 项目。 七、其他知识点 * 生命周期和钩子函数：在 Vue.js 中，每个组件都有其生命周期钩子函数，例如 mounted()、...
i18n-plugin:易于添加i18n文案的插件
05-07
i18n-plugin是一款专为简化国际化（i18n，Internationalization）文案处理而设计的插件。在软件开发中，尤其是Web应用领域，为了适应不同国家和地区的用户，通常需要提供多语言支持。i18n-plugin的出现，旨在帮助...
前端通用国际化解决方案 di18n-translate
腾讯全栈-ITCJF
04-18 3582
di18n-translate前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。以前端框架来说有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开发工作。同时在日常的工作当中，不同的项目使用的技术栈也会不一样。当需要对部分项目进行国际化改造时，由于技术栈的差异，这时你需要去寻找和当前项目使用的技术栈相匹配的...
html国际化插件,前端通用国际化解决方案
weixin_35835508的博客
06-25 682
文章首发于个人blog，欢迎大家关注。DI18n前端通用国际化解决方案背景前端技术日新月异，技术栈繁多。以前端框架来说有React, Vue, Angular等等，再配以webpack, gulp, Browserify, fis等等构建工具去满足日常的开发工作。同时在日常的工作当中，不同的项目使用的技术栈也会不一样。当需要对部分项目进行国际化改造时，由于技术栈的差异，这时你需要去寻找和当前项目使...
高级前端必备--自动化测试
越努力越幸运
11-25 793
测试分类 常见的开发流程里面，都有测试人员，这种我们称之为黑盒测试。测试人员并不需要去管实现机制，只看最外层的输入输出。比如一个计算机加法页面，设计人员会设计n个case，去测试该加法的正确性。这种如果我们开发人员用代码去做的话，我们称之为e2e测试。 还有一种测试叫白盒测试。我们针对⼀些内部机制的核⼼逻辑，使⽤代码进行编写，我们称之为单元测试。 其实我们代码里面的console.log，也算是一种测试的雏形。 测试的好处 组件的单元测试有很多好处: 提供描述组件⾏行行为的⽂文档 节省⼿手动测试的时间
前端国际化你还在一个个翻译?复制粘贴,让你坐着喝茶
weixin_42369612的博客
06-22 537
前端国际化的正确打开方式
前端国际化全流程解决方案
qq_42257169的博客
06-25 723
通过使用该一键式国际化解决方案插件，我们大大简化了项目的国际化过程，提高了开发效率和代码质量。开发人员可以更专注于业务逻辑的实现，而无需花费大量时间和精力在翻译和替换上。这一智能化的国际化方案为多语言版本的开发提供了便利，也为项目的国际化需求提供了更好的解决方案。朋友们，如果您觉得这款插件对您有帮助，欢迎访问我的GitHub您可以在该地址找到插件的详细文档、使用示例以及源代码。我会持续追加新特性和改进已有功能，让插件变得更加优质。不知是否有兴趣帮我们点个Star支持一下呢？
Nextjs——国际化那些事儿
最新发布
weixin_43207208的博客
08-04 959
某一天，产品经理跟我说，我们的产品需要搞国际化
前端自动化工具Gulp入门及常规配置
xyphf的博客
11-06 1004
1、首先你要装上nodejs环境； http://nodejs.org； 在命令行输入node -v 回车（Enter），如果安装正确，你会看到n ode的版本号； 在命令行输入npm -v 如果正确，你可以看到npm的版本号；如果错误，请重试；2、 cd定位到目录，用法：cd + 路径 ； cd..返回上层目录 dir列出文件列表； cls清空命令提示符窗口内容。3、安装
聊聊前端国际化文案该如何处理
零度源码
04-22 579
作者：@ES2049 Studio链接：https://www.yuque.com/es2049/blog/crhazl（点击尾部阅读原文前往）背景最近接到一个海外项目业...
springboot 国际化最简易使用
yzh_1346983557的博客
07-11 2667
i18n：internationalization，国际化在springboot中提供了快速使用方式。 一.项目结构 二.快速使用 1.pom.xml中引入spring-boot-starter基础包即可。 <!-- springboot 基础包 --> <dependency> <groupId>org.springframework.boot</groupId>
文案微信小程序源码独立版+前端
10-15
1. **【点击查最新更新】.bat**：这是一个批处理文件，通常用于运行自动化脚本，可能是用来检查或下载最新的项目更新。运行此文件可以便捷地获取项目的最新内容。 2. **readme.html**：这是一个HTML格式的阅读文件...
酒店管理系统需求分析报告文案.doc
09-18
酒店管理系统是用于提升酒店运营效率和服务质量的重要工具，它通过集成化的信息管理，帮助酒店在预订、客房、账务、员工等多个方面实现自动化操作。以下是该系统需求分析报告的主要内容： 一、引言 1. 概述 酒店...
动态图大全带文案支持收藏微信小程序源码
05-29
开发者可能创建了一个数据结构，如JSON，来存储每张动态图及其对应的文案，然后在前端渲染时将两者匹配展示。这种设计增强了用户体验，使得动态图不仅仅是视觉上的享受，还具有了情感表达或信息传递的作用。 【流量...
探索WebKit之巅：开启现代网页应用的高效与兼容之旅
weixin_67239318的博客
08-03 466
随着现代网页应用的快速发展，WebKit作为先进的浏览器引擎，其在高效性和兼容性上的表现显得尤为重要。本文深入探讨了WebKit的架构和渲染机制，揭示了其在支持Web标准和提升浏览体验方面的关键技术。通过分析WebKit如何处理DOM操作、JavaScript执行与图形渲染等挑战，我们了解到优化WebKit性能不仅关乎算法和硬件的优化，还涉及网络协议和安全框架的理解。此外，本文讨论如何通过WebKit应对多设备和分辨率下的兼容性问题。掌握这些关键因素，对于开发者来说，是打造高效、兼容的现代网页应用的基础。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 553
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 307
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
文章相关接口
qq_74474809的博客
08-03 236
跟着黑马程序员学习SpringBoot3+Vue3
hbuilder uniapp国际化示例源码
12-01
HBuilder Uniapp国际化示例源码是一个基于HBuilder开发工具和uni-app框架的国际化示例源码项目。通过该示例源码，开发者可以学习如何在uni-app框架下实现应用的国际化功能。 在该示例源码中，开发者可以看到如何利用uni-app框架提供的国际化插件和功能，实现应用界面内容、文案、提示信息等的多语言化显示。通过该示例源码，开发者可以学习如何配置多语言资源文件、实现不同语言版本的界面显示、切换语言功能的实现等。 示例源码中还展示了如何实现应用在不同语言环境下的适配和显示，包括日期格式、货币符号、数字显示方式等。此外，示例源码也包含了一些常见的国际化开发技巧和最佳实践，如如何处理多语言文字长度不一致导致的布局问题、如何处理不同语言习惯带来的界面显示差异等。 总之，HBuilder Uniapp国际化示例源码是一个非常实用的学习资源，对于想要在uni-app框架下开发国际化应用的开发者来说，是一个很好的参考和学习的范本。通过该示例源码，开发者可以快速了解并掌握uni-app框架下国际化功能的实现方法，为开发多语言版本的应用提供了很好的借鉴和指导。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值