多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

i18n-calypso-cli 实战指南:从 JavaScript 源码自动提取 WordPress/GlotPress 翻译文件

i18n-calypso-cli 实战指南:从 JavaScript 源码自动提取 WordPress/GlotPress 翻译文件 前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载i18n-calypso-cli是 wp-calypso 仓库packages/i18n-calypso-cli中负责国际化字符串提取的命令行工具它扫描 JavaScript/JSX/TypeScript 源码将代码中的translate()调用统一提取为可供 GlotPress 插件消费的 POT 文件或 WordPress 风格的 PHP 翻译文件。本文将从安装、CLI 用法、编程 API 三个层面展开并结合源码解析其解析器配置、三种输出格式器、行号过滤与内置 extras 机制的实现细节帮助你把它接入自己的前端项目实现“前端源码 → 翻译模板 → 服务器端翻译”的完整链路。工具定位它解决什么问题WordPress.com 的 Calypso 前端代码使用i18n.translate()这类调用标记所有需要翻译的字符串但 GlotPress 服务器端只能识别.potGettext PO 模板或 WordPress 风格的 PHP 翻译调用__()、_n()、_x()、_nx()。i18n-calypso-cli正是两者之间的桥梁——如 README.md 所描述Scans your JavaScript sources/build files and generates a POT file or a PHP translation file which can be understood by the GlotPress plugin.它做的事情本质上就是“静态扫描 格式转换”不执行你的源码而是用 xgettext-js 将源码解析成 AST找出所有翻译方法调用再按目标格式输出。包以 GPL-2.0-or-later 协议发布见 LICENSE.md通过bin字段暴露i18n-calypso命令package.json。安装作为独立 npm 包安装到当前项目yarn add i18n-calypso-cli包依赖commander、debug、globby与xgettext-js见 package.jsonglobby用于把传入的 glob 输入模式展开成真实文件列表xgettext-js负责源码解析。使用 CLI 提取翻译README 给出两种典型用法。第一种是全局安装后直接调用命令yarn global add i18n-calypso-cli i18n-calypso -i input_file -o output_file -f format:POT|PHP例如i18n-calypso -o ./outputFile.pot -i ./inputFile.js -i ./inputFile2.js完整命令行参数基于 cli.js 的 commander 配置i18n-calypso支持以下选项参数说明默认值-i, --input-file filename待扫描的源文件可重复传入多次内部用collect累积为数组也可在命令末尾直接以位置参数传入必填无默认-o, --output-file file输出文件路径不传时结果打印到 stdout-f, --format format输出格式php或potpot-k, --keywords keyword,keyword需要识别的翻译函数名逗号分隔translate-p, --project-name name项目名用于自动生成的头部元信息空-e, --extra name额外注入的字符串类型目前仅支持date无-l, --lines-filter fileJSON 文件按文件行号过滤只保留指定行的匹配无-a, --array-name namePHP 输出中承载方法调用数组的变量名projectName _i18n_strings命令行细节值得注意未提供任何输入文件时会抛出Error: You must enter the input file. Run i18n-calypso -h for examples.cli.js输入路径会先交给globby.sync()展开 glob例如client/**/*.js展开后的路径若不存在会在 stderr 打印Error: inputFile, ... does not exist但不会中断cli.js-l指定的 JSON 文件键是源码相对路径、值是行号数组键还会被转换为相对于cli.js所在目录的路径cli.js传入-o时成功会打印Done.未传则把生成内容打印到控制台cli.js。在代码中以 API 方式调用除 CLI 外也可以把它作为模块在构建脚本或 Node 工具链中使用README 给出了最小示例const i18nCalypso require( i18n-calypso-cli ); i18nCalypso( { inputPaths, // paths to your js files to scan, output, // path to your destination format, // format of the output: POT, PHP or JSON projectName, // Meta information about the project which can be used for autogenerated headers } );入口实现见 index.js其完整配置项比 README 示例更丰富keywords翻译函数名数组默认[ translate ]可自定义为项目自己的函数名data或inputPaths二者必填其一否则抛出Must provide input data or inputPaths。data模式下把字符串直接交给解析器匹配位置标记为unknownindex.jsextras额外字符串数组见下文“内置 extras”小节lines行号过滤对象对应 CLI 的-lphpArrayNamePHP 输出数组名textdomainPHP 输出中附加的文本域参数formatpot默认或phpformatters表定义在 formatters/index.jsREADME 中提到的JSON格式目前并未在格式器表中注册实际可用的是 POT 与 PHPcopyrightNotice、potHeader、projectBugsUrl用于定制 POT 头部返回值是生成的字符串传入output时同步写入文件index.js。解析器配置现代 JavaScript 语法全覆盖index.js 中xgettext-js的解析器启用了大量 Babel 风格插件asyncFunctions、classProperties、dynamicImport、exportDefaultFrom、exportExtensions、exportNamespaceFrom、jsx、objectRestSpread、trailingFunctionCommas、typescript、nullishCoalescingOperator与optionalChaining并开启allowImportExportEverywhere。这意味着该工具可以解析现代前端工程中的常见语法JSX 组件内嵌的翻译、export default模块、动态import()、TypeScript 文件、可选链a?.b与空值合并a ?? b等——后两项正是 CHANGELOG 中「unreleased」条目明确新增的能力CHANGELOG.md。匹配预处理字符串拼接、模板字符串与复数每个匹配的translate()调用会先经过 preprocess-xgettextjs-match.js 归一化该模块负责多段字符串拼接A long string broken up over multiple lines这类连接的 BinaryExpression 会被递归拼接为单个字符串concatenateBinaryExpression引号与转义归一化makeDoubleQuoted()把单引号、双引号与反引号模板字符串统一转换为 PHP 可消费的双引号形式并对\和做转义模板字符串TemplateLiteral 直接提取第一个quasi的原始值复数默认 count只要存在plural字段就强制finalProps.count 1——源码注释说明服务器端只关心字符串是否注册到 GlotPress真实 count 由客户端决定展示哪个复数形态preprocess-xgettextjs-match.jsd3 冲突防御若single字段为空如 d3 库自己的translate()方法则返回false跳过该匹配preprocess-xgettextjs-match.js。两种输出格式深度解析POT 格式器formatters/pot.js 生成标准 Gettext PO 模板结构如下# THIS IS A GENERATED FILE. DO NOT EDIT DIRECTLY. msgid msgstr Project-Id-Version: _s projectName\n Report-Msgid-Bugs-To: projectBugsUrl\n POT-Creation-Date: ISO时间\n MIME-Version: 1.0\n Content-Type: text/plain; charsetUTF-8\n Content-Transfer-Encoding: 8bit\n PO-Revision-Date: 2014-MO-DA HO:MIZONE\n Last-Translator: FULL NAME EMAILADDRESS\n Language-Team: LANGUAGE LLli.org\n #: test/examples/i18n-test-examples.jsx:9 msgid My hat has three corners too. msgstr msgctxt verb msgid post msgstr 格式器要点结合 formatters/pot.js每条匹配输出#: 文件:行号位置注释、可选的#. 译者注释、可选的msgctxt上下文、msgid与复数时msgid_plural/msgstr[0]/msgstr[1]去重与聚合以msgid 上下文作为唯一标识同一字符串的多个出现位置会合并到一条#:注释中单独出现的单数形式会被合并进已有的复数条目#: ... #: ... #. Second ocurrence\nmsgid My hat has three corners.正是这一行为的测试用例见 test/i18n.js头部可用potHeader整体覆盖copyrightNotice会以#前缀逐行写入文件头部。PHP 格式器formatters/php.js 生成可直接被 WordPress/GlotPress 加载的 PHP 文件把 JS 侧的translate()调用映射为 WP 翻译函数映射规则在getGlotPressFunction()中定义formatters/php.jsJS 调用形态生成的 PHP 函数仅单数字符串__( ... ),单数 复数_n( single, plural, 1 ),单数 上下文_x( single, context ),单数 复数 上下文_nx( single, plural, 1, context ),输出文件骨架为?php /* THIS IS A GENERATED FILE. DO NOT EDIT DIRECTLY. */ $arrayName array( __( My hat has three corners. ), // test/examples/i18n-test-examples.jsx:6 /* translators: draft saved date format, see http://php.net/date */ __( g:i:s a ), _n( single test, plural test, 1 ), _x( post, verb ), ); /* THIS IS THE END OF THE GENERATED FILE */细节包括数组名默认取projectName _i18n_strings可用phpArrayName/-a覆盖formatters/php.jstextdomain存在时追加为函数第二/第四参数并转义其中的双引号, textdomain.replace( //g, \\ )见 formatters/php.js带注释的翻译前会输出/* translators: ... */且会把注释里的*/转义为*\/防止译者注释意外截断 PHP 代码formatters/php.js每条调用尾部追加// 文件:行号便于回溯。79 列换行算法POT 格式要求单行不超过 80 字符formatters/multiline.js 负责把长字符串按MAX_COLUMNS 79拆行优先在行内向左侧寻找空格/,;等分隔符断行找不到则向右找若整行没有任何分隔符单个超长词则保持不拆换行符统一转为\n字面量。长字符串会生成形如第一段 \n第二段的多行拼接形式。行号过滤只提取你关心的代码行-l, --lines-filter提供精确控制能力。过滤文件是一个 JSON 对象键为源码相对路径值为行号数组{ client/my-sites/example.js: [ 12, 47, 103 ] }机制如下index.js每个匹配携带文件:行号定位信息过滤时按:拆开仅当文件名存在于过滤对象且行号命中数组时才保留该匹配。此特性适合只对改动文件、或只对特定代码片段做增量提取避免每次全量扫描造成重复条目。内置 extrasdate 时间与数字格式字符串-e date或配置extras: [ date ]会把 extras/date.js 中的预置翻译字符串合并进输出内容分两类日期/时间相对表述in %s上下文future time、a few seconds、a minute、%d minutes、%d hours、%d days、a month、%d months、a year、%d years数字格式number_format_thousands_sep与number_format_decimal_point均带/* translators: */注释指向http://php.net/number_format的$thousands_sep与$dec_point参数。这些字符串服务于前端相对时间与数字本地化如 Moment.js 时间差文案。实现上extras 文件会走与普通源码相同的解析管道index.js因此同样支持多文件聚合与去重。测试中对这一行为有明确断言test/i18n.js。源码支持的翻译调用形态一览测试示例文件 test/examples/i18n-test-examples.jsx 汇总了工具支持的全部调用形态可作为接入时的语法速查表形态示例最简字符串i18n.translate( My hat has three corners. )original对象键i18n.translate( { original: ... } )单数/复数对象i18n.translate( { original: { single: ..., plural: ..., count } } )模板字符串i18n.translate( \My hat has six corners. )上下文i18n.translate( { original: post, context: verb } )位置参数 上下文i18n.translate( post2, { context: verb2 } )译者注释i18n.translate( { original: g:i:s a, comment: draft saved date format } )sprintf 命名占位i18n.translate( { original: Your city is %(city)s..., args: { city, zip } } )新复数语法i18n.translate( single test, plural test, { count: 1 } )拼接多行字符串A long string and mixed quotes字面量字符串键{ context with a literal string key: ... }风格选项Unicode 转义This is how the test performed\u2026验证与测试仓库自带完整测试套件test/i18n.jsREADME 中引用的test/index.js在仓库中实际对应此文件覆盖 POT 与 PHP 两条链路的断言POT默认头部字段齐全、单数与复数条目生成、单复数合并、上下文、译者注释、行号、多文件聚合、拼接、模板字符串、Unicode 转义、数字格式 extrasPHP以?php开头、数组名自定义、四种 WP 函数映射、注释与行号、textdomain含双引号转义场景。运行方式包内 jest 配置见 jest.config.jsyarn workspace automattic/i18n-calypso-cli test典型接入流程把上述能力串起来一个完整的“前端源码 → 翻译文件”接入流程如下前端统一使用i18n.translate()或通过-k自定义函数名标记字符串支持 JSX、TS、模板字符串等现代语法构建/发布前执行i18n-calypso -i src/**/*.{js,jsx,ts,tsx} -o ./i18n/languages/calypso.pot -f POT -p my-project -e date生成 POT 模板供 GlotPress 导入词条若需把翻译随服务端渲染下发改用 PHP 格式i18n-calypso -i src/**/*.{js,jsx} -o ./i18n/languages/calypso-strings.php -f PHP -p my-project -a i18n_strings --textdomain my-domain只做增量更新时配合-l lines.json按文件行号过滤避免重复条目。小结i18n-calypso-cli是一个聚焦单一职责、设计精巧的翻译提取工具CLI 与编程 API 双入口、现代语法全覆盖的 xgettext-js 解析配置、POT/PHP 双格式输出、按行号精确过滤以及可扩展的 extras 机制共同支撑 wp-calypso 这样大型前端项目的持续国际化。通过 cli.js、index.js 与 test/i18n.js 三份关键文件你可以快速定位其行为细节并参考测试用例把同样的提取管线复用到自己的工程中。赞分享前端CMS【免费下载链接】wp-calypsoThe JavaScript and API powered WordPress.com项目地址https://gitcode.com/gh_mirrors/wp/wp-calypso点击查看免费下载相关推荐i18n-calypso-cli 源码级解析从 JS 源码自动提取 POT/PHP 翻译文件i18n calypso cli 源码级解析从 JS 源码自动提取 POT/PHP 翻译文件 导读 i18n calypso cli 是 wp calypso前端CMSAngular i18n 翻译文件实战指南使用 extract-i18n 提取源语言文件并完成多语言翻译Angular i18n 翻译文件实战指南使用 extract i18n 提取源语言文件并完成多语言翻译 在 Angular 应用中引入国际化i18n时前端Web框架wp-calypso 新版 Dashboard 国际化i18n实践指南wordpress/i18n 翻译规范与 CSS 逻辑属性wp calypso 新版 Dashboard 国际化i18n实践指南wordpress/i18n 翻译规范与 CSS 逻辑属性 本文聚焦 wp cal前端CMS上一篇Discuz 7.x/6.x 全局变量防御绕过request_orderGP导致代码执行漏洞原理分析与实战复现下一篇思源黑体TTF专业级免费商用字体构建方案深度解析创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表