NPM扩展包开发端如何支持国际化

NPM扩展包支持平台国际化关键步骤 1、添加翻译工具（i18n-command）和语料运行时（i18n-runtime）依赖，以及相关翻译脚本：

2、添加翻译工具配置文件：i18nConfig.js

备注1：翻译默认使用百度翻译，请在百度翻译开发平台申请：http://api.fanyi.baidu.com/manage/developer：

备注2: 补充百度翻译配置：

3、在当前源码根目录下创建语料存放文件：

备注：执行翻译的时候，会将源码中提取的语料存放在src/locale/zh-CN.ts中，机器翻译后的语料存放在src/locale/en-US.ts中。

4、项目中的每个入口文件需要引入locale/index.ts 备注：运行时导入对应的语料数据。

5、提取或更新语料（需确保已安装相关依赖）：npm run i18n:update 【备注】提取过程：提取源码中的语料，并按语料md5为key存在到语料文件中（src/locale/zh-CN.ts）。

6、翻译语料：npm run i18n:translate 【备注1】翻译过程：将提取出来的语料翻译成英文，并存放到对应语料文件中（src/locale/en-US.ts）; 【备注2】遇到不合适的翻译，可以在src/locale/en-US.ts中手动调整翻译后的语料。

7、语料提取和翻译后，还需要在构建生产环境文件中，添加语料替换插件，以webpack为例，需要补充webpack-react-i18n插件和依赖： 备注：源码中的语料会被替换成 i18nRuntime.i18n("02d9819ddaaaeb1b7b22b12608c7e5ca")。

可参考：https://github.com/aisuda/i18n-react-custom-widget-template

最终效果如下：

注意事项 1、i18n-command 只能翻译指定目录下现有文件内容，通过npm引入的或没在指定目录下的文件内容不会翻译； 2、NPM自定义组件在编辑器端通过属性配置面板补充的语料会直接放入页面schema中，这些语料未经过翻译，所以不能实时展示当前语种内容；解决方法：自定义组件的属性配置改用系统内置的schemaTpl（目前仅在爱速搭平台生效）。