从一次重构组件代码来谈谈前端多语言最佳实践

从一次重构组件代码来谈谈前端多语言最佳实践

摘要

我们的一些业务组件需要支持多语言，这些单独发包的组件翻译文案通常都维护在项目一些文件夹下，并且每个需要翻译的文案在代码中都需要手动用 intl.get(key)包裹来实现运行时翻译，开发者也需要根据这些文案一个一个去谷歌进行多种语言翻译，然后再写到项目中。这在无形中给组件开发者加重了开发成本，并且如果翻译有误，PM 和运营同学也无法去代码仓库去修改这些翻译。所以业务组件需要一套更标准，更轻量的多语言方案，来替代上面这些手动工作。经过一些调研后，决定采用公司的 translate-cli + 国际化翻译平台 + 外部开源的 react-intl-universal 来完成组件的多语言。

既然决定了采用新的多语言方案，那么目前翻译文案维护在本地的现存组件就要去改造来接入新的多语言方案。但是现存的组件有 30+个，如果让这些组件的开发者每个组件一个一个文件去改造，会带来很大的成本。而且这些组件的修改内容其实都是一样的，那么完全可以开发一个 CLI 命令去让开发者在自己的组件根目录执行一次，一键完成组件的多语言方案迁移。这样就能很大的减轻了开发者的改造成本。