# @denysvuika/preact-translate 中文文档

规范地址：https://npmcn.com/package/%40denysvuika/preact-translate/

版本：0\.6\.0
npm 元数据更新时间：2025-05-26T14:25:09.869Z
中文译文更新时间：2026-11-11T22:48:02.211Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40denysvuika/preact-translate
原文对照：https://npmcn.com/package/%40denysvuika/preact-translate/?lang=original
项目主页：https://github.com/DenysVuika/preact-translate
源码仓库：https://github.com/DenysVuika/preact-translate

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：11 kB，5 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：preact \>=10\.13\.0
- 首次发布：2019-07-18T09:14:01.511Z
- 最新版本发布：2025-05-26T14:25:09.704Z
- 近 30 天下载量：56298（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 0 个）

## 中文简介

Preact 最小翻译( i18n) 库

## 安装

```sh
npm install @denysvuika/preact-translate
```

也可以使用：`pnpm add @denysvuika/preact-translate`、`yarn add @denysvuika/preact-translate`、`bun add @denysvuika/preact-translate`

## README

# 预译

Preact 最小翻译( i18n) 库  
套装大小:~1KB

[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/denys)

## 安装

最低要求: **预告 10.0.0**

使用 Yarn :

```sh
yarn add @denysvuika/preact-translate
```

利用国家预防机制:

```sh
npm i @denysvuika/preact-translate
```

## 基本用途

你应该把你的申请包在 `TranslateProvider` 组件 :

```jsx
import { TranslateProvider } from '@denysvuika/preact-translate';

export default function App() {
  return (
    <TranslateProvider>
      <MainComponent />
    </TranslateProvider>
  );
}
```

创建一个 `assets/en.json` 包含以下内容的文件 :

```json
{
  "title": "Hello",
  "subtitle": "World"
}
```

创建第二个文件 `assets/ua.json` 可以在不同的资源之间切换.

```json
{
  "title": "[ua] Hello",
  "subtitle": "[ua] World"
}
```

你现在可以使用 `TranslateContext` 在访问翻译 API 和数据的组件中:

```jsx
import { useContext } from 'preact/hooks';
import { TranslateContext } from '@denysvuika/preact-translate';

export default function MainComponent() {
  const { setLang, t, lang } = useContext(TranslateContext);

  return (
    <div>
      <div>Lang: {lang}</div>
      <div>{t('title')}</div>
      <div>{t('subtitle')}</div>
      <div>
        <button onClick={() => setLang('en')}>EN</button>
        <button onClick={() => setLang('ua')}>UA</button>
      </div>
    </div>
  );
}
```

给 `EN` 语言:

```text
Lang: en
Hello
World
```

给 `UA` 语言:

```text
Lang: ua
[ua] Hello
[ua] World
```

语言加载按要求执行 . 这个 `en.json` 只有在您的应用程序第一次要求时才加载并缓存 .

## 配置资产根文件夹

默认情况下 `assets` 文件夹用于获取本地地址 . 你可以通过 `TranslateProvider.root` 属性 :

```jsx
import { TranslateProvider } from '@denysvuika/preact-translate';

export default function App() {
  return (
    <TranslateProvider root="i18n">
      <MainComponent />
    </TranslateProvider>
  );
}
```

## 格式翻译

您可以在翻译文本时使用运行时字符串替换

```json
{
  "hello": "Hello, {name}"
}
```

然后在JSX中:

```jsx
<div>{t('hello', { name: 'Bob' })}</div>
```

## 编译

库支持有嵌入级的复杂对象.

把下面放进 `en.json` 文件 :

```json
{
  "messages": {
    "errors": {
      "404": "Sorry, not found"
    }
  }
}
```

在JSX中

```jsx
<div>{t('messages.errors.404')}</div>
```

也可以使用下列复合字符串:

```json
{
  "messages.errors.404": "Sorry, not found"
}
```

## 默认语言

您可以通过指定 `TranslateProvider.lang` 属性.

```html
<TranslateProvider lang="ua">
  <Application />
</TranslateProvider>
```

请注意,在此情况下,提供者将在启动时加载并缓存两个地块: `en.json` (作为后退)和 `ua.json` (作为一个活跃的朗语).

## 自定义翻译数据

你用得着 `TranslateProvider.translations` 属性,以提供代码中的自定义翻译数据. 这对单位测试也有帮助.

```jsx
const data = {
  en: {
    messages: {
      404: 'Not found'
    }
  }
};

<TranslateProvider translations={data}>
  <Application />
</TranslateProvider>;
```

注意 `TranslateProvider` 将不获取此选项的翻译文件 `en` 语言, 并使用您的自定义数据.

## 常见问题

### @denysvuika/preact-translate 是什么？

Preact 最小翻译\( i18n\) 库

### 如何安装 @denysvuika/preact-translate？

在项目目录运行 npm install @denysvuika/preact-translate，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：preact（\>=10\.13\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @denysvuika/preact-translate 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @denysvuika/preact-translate 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @denysvuika/preact-translate 可以商用吗？

@denysvuika/preact-translate 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @denysvuika/preact-translate 的下载量有多少？

根据 npm 官方下载统计，@denysvuika/preact-translate 在 2026/10/12 – 2026/11/10 这 30 天内被下载 56,298 次，日均约 1,877 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @denysvuika/preact-translate 还在维护吗？

最新版本 0\.6\.0 发布于 2025/05/26（1\.5 年前）；至今共发布 14 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/07/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。