%20(2).svg)
项目简介
本项目是名为dot-i18n的国际化库，基于React和TypeScript构建。它为开发者在React和TypeScript项目里实现多语言支持提供了简洁、高效的方式，可轻松管理多语言文本，支持从Excel导入导出翻译内容，还具备灵活的文本替换功能。
项目的主要特性和功能
主要特性
- 无痕多语言配置：简单配置即可实现多语言切换，无需复杂设置。
- 便携式ts/excel转换：支持从Excel导入导出翻译内容，便于翻译和更新。
- 性能优化：使用XML形式的
<i18n>标签提高性能，也支持函数调用形式的i18n("text")，提供更大灵活性。
功能特点
- 支持React Hooks：可在组件内使用，但不能在自定义Hooks中使用。
- 灵活的文本替换：支持变量替换，能在多语言文本中嵌入动态变量。
- 简单易用的API：易于集成到现有项目，有清晰的配置和使用文档。
- 多种语言支持：支持多种语言切换，适用于不同国际化场景。
安装使用步骤
假设用户已下载本项目的源码文件，以下是安装和使用步骤：
1. 初始化项目：
bash
npx create-react-app dot-i18n-demo --template typescript
2. 安装所需依赖：
bash
cd dot-i18n-demo
yarn eject
yarn add dot-i18n --save
yarn add dot-i18n-loader --dev
3. 配置i18n：
在项目根目录创建i18n.config.json文件，配置多语言相关设置：
json
{
"baseUrl": "/src/",
"outDir": "/src/locales",
"filename": "index",
"exportExcelPath": "/.i18n/result.xlsx",
"importExcelPath": "/.i18n/result.xlsx",
"languages": ["zh", "en"]
}
4. 添加脚本：
在package.json中添加以下脚本：
json
"scripts": {
"ts2excel": "node ./node_modules/dot-i18n-loader/node/ts2excel",
"excel2ts": "node ./node_modules/dot-i18n-loader/node/excel2ts",
"scanning": "node ./node_modules/dot-i18n-loader/node/scanning"
}
5. 配置Webpack Loader：
在Webpack配置中添加dot-i18n-loader：
js
[
{
test: /\.(tsx|ts)$/,
exclude: /node_modules/,
use: { loader: 'dot-i18n-loader' }
}
]
如果使用Webpack 5+，还需配置额外的插件：
js
[
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer']
}),
]
6. 初始化词条：
执行以下命令初始化词条文件：
bash
yarn scanning
7. 在根组件中使用DotI18N.Provider：
在index.tsx中使用DotI18N.Provider包裹应用：
```typescript
import DotI18N from "dot-i18n";
import locales from "../locales";
8. **编写多语言文本**：
在项目中使用`<i18n>`标签或`i18n("text")`函数编写多语言文本。例如：typescript
function App() {
return (
``
9. **翻译流程**：
- 执行yarn scanning：扫描项目中的词条并收集到locales中。
- 执行yarn ts2excel：将locales中的词条导出到Excel文件中。
- 执行yarn excel2ts：将Excel中翻译好的词条导入到locales`中。
通过以上步骤，可在项目中轻松实现多语言支持。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】