尝试演示

查看我们的 Github 仓库并运行 Webpack 演示应用程序。请参阅 "构建和启动演示应用程序"

集成到你的应用程序中

NPM 模块依赖项

要添加到你的应用程序的 dependencies 中的必需 NPM 模块是

• fbt - fbt 运行时模块
• babel-plugin-fbt - 主要的 Babel 转换
• babel-plugin-fbt-runtime - 次要的 Babel 转换
  • 转换 fbt._(...) 中的原始有效负载，以便它们可以在运行时使用 (由 fbt._)
  • 注意: 此插件应该合并到 babel-plugin-fbt 中
• @fbtjs/default-collection-transform
  • 只有当你选择 *不* 在 收集脚本 中传递自定义 --transform 或 --custom-collector 时才需要

如果你不熟悉 Babel，你可以阅读 他们的文档

Babel 插件排序 (注意事项)

如果你使用其他 Babel 插件，需要注意插件排序方面的问题。FBT 希望成为第一个访问其相关的 <fbt> 和 fbt(...) 节点的插件 请参阅此 Github issue 跟踪此问题

如果另一个转换器在 babel-plugin-fbt 之前到达 Babel AST 节点并对其进行转换，导致该插件不再将其“识别”为 fbt 节点，你将会遇到问题。这在 JSX 节点上最常见。要解决此问题，你可以使用 Babel 的 passPerPreset 选项，并确保 babel-plugin-fbt 位于较早的预设包中

babel.transformSync(source, {

passPerPreset: true,

{presets: [

{plugins: ['babel-plugin-fbt', 'babel-plugin-fbt-runtime'... ]}

{plugins: ['babel-plugin-jsx-foo', ...]} //

]},

... // 你的其他选项

})

Webpack 示例

你需要以类似于我们的演示应用程序的方式添加 fbt babel 转换。 请参阅我们的演示应用程序的 Webpack 配置

构建时/离线流程

收集

babel-plugin-fbt 包中捆绑了一些脚本，这些脚本旨在从应用程序的源代码中收集源文本（和关联的元数据）。它们是

• fbt-manifest - 扫描提供的文件系统路径并生成 枚举模块 的清单
  • 注意：枚举模块必须以 $FbtEnum.(js|jsx|ts|tsx) 结尾 (即 Foo$FbtEnum.js)
• fbt-collectFbt - 给定源输入，提取任何源文本并以 JSON 格式将其打印到 STDOUT
  • @fbtjs/default-collection-transform - 如前所述，此可选软件包为收集提供了一个默认转换

翻译

• fbt-translate - 为运行时创建翻译有效负载
  • 获取提取的源文本（来自 collectFbt）和 以 JSON 格式提供的翻译 以生成这些有效负载

如何使用这些脚本

你可以看到演示应用程序 如何在此处调用这些脚本。

演示应用程序 在此处的另一个脚本中运行所有这些

运行时

fbt 运行时 是将翻译阶段生成的翻译有效负载表解析为基于运行时提供的所有输入的单个结果的工具。

初始化

fbt 运行时要求你通过 init() 函数使用相关的翻译进行初始化。你可以在 演示应用程序 中看到一个示例。

即时更改翻译区域设置

让我们假设你使用 --output-dir 选项 的 translate 脚本，按区域设置拆分了翻译有效负载。在此示例中，你的应用程序已使用 es_ES 翻译有效负载进行初始化，并且在用户请求时，你需要加载 fr_FR 翻译并在 UI 中显示它们。（我们将假设你的应用程序已经可以访问新的翻译有效负载）

为了即时更改翻译区域设置，你需要执行以下所有操作

1. 通过调用 FbtTranslations.registerTranslations(newTranslationPayload) 来更新翻译有效负载。在那里使用的翻译有效负载对象应具有与传递给 init() 函数的对象相同的结构。
2. 通过向 init() 函数提供 getViewerContext() 钩子来公开当前的 UI 翻译区域设置。有关示例，请参阅我们的 演示应用程序。
   1. 注意：仅更改翻译有效负载是不够的，因为我们基于 UI 区域设置应用各种数字变体和语音规则。也就是说，如果你忘记更改区域设置，你可能仍然会显示不正确的翻译。