di18n滴滴前端国际化方案

di18n  是滴滴开源的自动转换、基于配置的前端国际化方案。它能自动扫描代码中的主语言，将其替换成国际化标记；同时将语言抽取成配置，可以放到服务端保存及更新。

工作原理

di18n 会先按如下步骤扫描源码：

• 使用 Babel 解析得到 AST，遍历 AST，并对特殊的节点进行检查，抽取出需要翻译的字符串；


• 自动为每一个字符串分配一个 key 因随机 key 可读性差，已改成使用主语言（如中文）文案为 key；


• 自动调用 Google 翻译服务（可选），得到一个英文的字符串。

注：对于 React，上面提到的特殊节点包括： JSXText StringLiteral TemplateLiteral 等。

扫描之后，对于源代码：

• 构造 CallExpression 表达式 intl.t('key1')；


• 替换原有节点 path.replaceWith(newNode)；


• 将新的 AST 通过 Babel 转换为代码；


• 使用 Prettier 格式化代码；


• 将新的代码落盘。

对于国际化资源：

• 将 key-value 转换为 i18n 配置文件格式。

流程图

安装

$ npm i -D di18n-cli



# or



$ yarn add  -D di18n-cli

初始化

React

$ npx di18n init

注意：TypeScript 需要将配置文件 di18n.config.js 的 prettier.parser 改为 "typescript"。

Vue

$ npx di18n init --vue

转换

$ npx di18n sync