--- theme: hydrogen --- 最近在做项目的多语言翻译，由于是老项目，里面需要翻译的文本太多了，如果一个个翻译的话，一个人可能一个月也做不完，因此考虑使用自动化工具实现。我也从网上搜索了很多现有的自动化翻译工具，有vsc插件、webpack或vite插件、webpack loader等前人实现的方案，但是安装之后发现，要不脱离不了一个个点击生成的繁琐，要不插件安装太麻烦，安装报错依赖报错等等问题层出不穷。因此，决定自己写一个，它需要满足： ```text 1.不需要手动改代码，自动运行生成 2.不需要查翻译，自动调用翻译接口生成翻译内容 3.不需要安装，避免安装问题、环境问题等 ``` ## i18n-cli 工具的产生经过一个星期左右的开发和调试，i18n-cli自动化翻译工具实现了，详情可以看[@tenado/i18n-cli](https://www.npmjs.com/package/@tenado/i18n-cli)。先来看看使用效果：转换前： ```vue ``` 转换后： ```vue ``` @tenado/i18n-cli翻译，不受语言类型限制，目前vue、react、vue3等代码都能完美的支持，它通过分析语法树，自动匹配中文内容，并生成翻译后的代码。 ## 如何使用 i18n-cli 工具 1.下载@tenado/i18n-cli项目代码，例如存作i18n-cli 2.将需要翻译的代码文件，拷贝到i18n-cli项目下的目录下 3.修改 i18n.config.js 配置，修改入口entry为你刚复制的文件的位置，修改你需要翻译的语言列表langs，例如英文、繁体['en-US', 'zh-TW']，修改引入i18n的方法i18nImport、i18nObject、i18nMethod，修改翻译的类型和秘钥，一个简单的配置如下： ```js module.exports = { // 入口位置 entry: ['example/transform-i-tag'], // 翻译后的文件存放位置 localPath: './example/transform-i-tag/locales', // 需要翻译的语言列表 langs: ['en-US'], // 引入i18n i18nImport: "import { t } from 'i18n';", i18nObject: '', i18nMethod: 't', // 翻译配置，例如百度 translate: { type: 'baidu', appId: '2023088292121', secretKey: 'J1ArqOof1s8kree', interval: 1000, }, }; ``` 4.在i18n-cli项目下执行命令，`npm run sync`，将会修改你刚复制的文件里面的代码，并在locales下生成翻译内容，这里如果没有百度翻译api key，那你可以先收集，后面在翻译，先执行 `npm run extract`，再执行 `npm run translate` 5.将修改后的文件复制回你的项目下当然，i18n-cli 的配置不是仅仅这些，更多配置你可以去 [@tenado/i18n-cli](https://github.com/tenadolanter/i18n-cli) 对应的 github 仓库上查看 ## i18n-cli 是怎么实现的 ### 1、收集文件根据入口，获取需要处理的文件列表，主要代码如下： ```js // 根据入口获取文件列表 const getSourceFiles = (entry, exclude) => { return glob.sync(`${entry}/**/*.{js,ts,tsx,jsx,vue}`, { ignore: exclude || [], }) } // 例如 getSourceFiles('src/components') // 结果 ['src/components/Select/index.vue', 'src/components/Select/options.vue', 'src/components/Select/index.js'] ``` ### 2、转换文件根据文件类型，生成不同文件的语法树，例如.vue文件分别解析vue的template、style、script三个部分，例如.ts、.tsx文件，例如html，解析成ast语法树后，针对不同类型的中文分别处理，如下是babel转换ast时候里面的一部分核心代码： ```js const { declare } = require("@babel/helper-plugin-utils"); const generate = require("@babel/generator").default; module.exports = declare((api, options) => { return { visitor: { // 针对不同类型的中文，进行转换 // 代码太多，这里不贴全部，具体的可以去github上查看源码 DirectiveLiteral() {}, StringLiteral() {}, TemplateLiteral() {}, CallExpression() {}, ObjectExpression() {}, }, }; }); ``` ### 3、调用接口翻译根据locales文件存放位置，把收集到的中文都存在`./locales/zh-CN.json`里面，收集中文和key是在文件转换过程处理的。这个过程，会根据生成的中文json，去请求接口，拿到中文对应语言的翻译，实现代码如下： ```js const fetch = require("node-fetch"); const md5 = require('md5'); const createHttpError = require('http-errors'); const langMap = require("./langMap.js"); const defaultOptions = { from: "auto", to: "en", appid: "", salt: "wgb236hj", sign: "", } module.exports = async (text, lang, options) => { const hostUrl = "http://api.fanyi.baidu.com/api/trans/vip/translate"; let _options = { q: text, ...defaultOptions, } const { local } = options ?? {}; const { appId, secretKey } = options?.translate ?? {}; if(local) { _options.from = langMap('baidu', local); } if(lang) { _options.to = langMap('baidu', lang); } _options.appid = appId; const str = `${_options.appid}${_options.q}${_options.salt}${secretKey}`; _options.sign = md5(str); const buildBody = () => { return new URLSearchParams(_options).toString(); } const buildOption = () => { const opt = {}; opt.method = 'POST'; opt.headers = { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8', } opt.body = buildBody(); return opt; } const buildError = async (res) => { const extractTooManyRequestsInfo = (html) => { const ip = html.match(/IP address: (.+?)
/)?.[1] || ''; const time = html.match(/Time: (.+?)
/)?.[1] || ''; const url = (html.match(/URL: (.+?)
/)?.[1] || '').replace(/&/g, '&'); return { ip, time, url }; } if (res.status === 429) { const text = await res.text(); const { ip, time, url } = extractTooManyRequestsInfo(text); const message = `${res.statusText} IP: ${ip}, Time: ${time}, Url: ${url}`; return createHttpError(res.status, message); } else { return createHttpError(res.status, res.statusText); } } const buildText = ({ error_code, error_msg, trans_result }) => { if(!error_code) { return trans_result?.map(item => item.dst); } else { console.error(`百度翻译报错: ${error_code}, ${error_msg}`) return ''; } } const fetchOption = buildOption(); const res = await fetch(hostUrl, fetchOption) if(!res.ok) { throw await buildError(res) } const raw = await res.json(); const _text = buildText(raw); return _text; } ``` ## 总结 i18n-cli 是一个全自动的国际化插件，可以一键翻译多国语言，同时不会影响项目的业务代码，对于国际化场景是一个很强大的工具。使用 i18n-cli 可以大大减少项目多语言翻译的工作量，这个插件已经在我们项目中使用很久了，是一个成熟的方案，欢迎大家使用，欢迎提交issues，欢迎star。