npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-i18n-autoreplace

v0.1.3

Published

国际化文案批量替换 react-i18n-autoreplace, Automatically scan the project for Chinese text and replace it with i18n format for translation

Downloads

55

Readme

批量翻译替换react内中文,支持一对多翻译,最终会替换原文件,会生成execl,翻译文案json。最小运行仅需配置入口和百度翻译账号。

使用方法

1、在项目根目录新建js脚本文件

// replace-i18n.js
const { ReplaceI18n } = require('react-i18n-autoreplace');
const config = {
    entry: './src/pages/i18n/index.tsx',
    baiduConfig:{
        appId: "xxxxx",
        bdKey: "xxxxx"
    },
}
const replaceTask = new ReplaceI18n(config);
replaceTask.init();

// package.json
"replace": "node ./replace-i18n.js"


2、在命令行启动脚本
```js
  npm run replace

配置信息

export interface IAutoReplaceTextI18nConfig {
  entry: string; // 入口文件
  project?: string; // 项目名   用来生成okr的key
  moduleName?: string; // 功能模块名
  pageName?: string; // 页面
  point?: string; // 页面功能点
  manualHandlingSameText?: boolean; // 是否手动替换相同文案为同一key
  manualHandlerErrorTrans?: boolean; // 是否手动替换翻译失败文案
  fetchTranslate?: TranslateFetchFunc; // 请求翻译的方法,如果得译能提供的话,默认内置百度的。
  importI18nConfig?: {
    prefixFunctionName?: string; // 't'
    suffixPath?: string; // '@/config/i18n'
    fullPath?: string; // `import { t } from '@/config/t';`
    split?: string;
    needRelativePath?: boolean; // 生成的key是否加上相对路径
    keyWordLength?: number; // 取翻译前多少个单词为key,默认10个
    keyAddSource?: boolean; // key上是否加上中文
  };
  baiduConfig: {
    appId: number;
    bdKey: string;
    to?: string[]; // https://api.fanyi.baidu.com/doc/21
  };
  deyi?: {
    dominTag?: number; // 相关配置 域标签,涉及导出
    pageKey?: string;
  };
  downloadFileName?: string;
  prettierOption?: Record<string, any>;
  exclude?: (name: string) => boolean; // 排除文件
  baseDict?: any; // 基础字典
  formaterBaseDictMap?: (
    data: string,
    url: string
  ) => Record<string, any> | void; // 格式化字典
}

具体文档流程

IAutoReplaceTextI18nConfig 接口用于配置国际化自动替换文本的相关设置。

属性列表

| 属性名 | 类型 | 描述 | |-----------------------|---------------------|------------------------------------------------------------------------------------------------------------| | entry | string | 入口文件的路径。 | | project? | string | 项目名,用于生成 OKR 的 key。如果未提供,则不生成。 | | moduleName? | string | 功能模块名。 | | pageName? | string | 页面名称。 | | point? | string | 页面功能点。 | | manualHandlingSameText? | boolean | 是否手动替换相同文案为同一 key。默认为 false。 | | manualHandlerErrorTrans? | boolean | 是否手动替换翻译失败的文案。默认为 false。 | | fetchTranslate? | TranslateFetchFunc | 请求翻译的方法,如果得译能提供的话,默认内置百度的翻译服务。 | | importI18nConfig? | object | 导入国际化配置的相关设置。 | | baiduConfig? | object | 百度翻译服务的配置。 | | deyi? | object | 得译翻译服务的相关配置。 | | downloadFileName? | string | 下载文件的名称。 | | prettierOption? | Record<string, any> | Prettier 格式化工具的配置选项。 | | exclude? | (name: string) => boolean | 排除文件的函数,返回 true 表示排除该文件。 | | baseDict? | any | 基础字典,用于存储翻译文本。 | | formaterBaseDictMap?| (data: string, url: string) => Record<string, any> | void | 格式化字典的函数,可以根据传入的数据和 URL 格式化基础字典。 |

importI18nConfig 子属性

importI18nConfig 对象包含以下属性:

  • prefixFunctionName?: string - 前缀函数名称,默认为 't'
  • suffixPath?: string - 后缀路径,默认为 '@/config/i18n'
  • fullPath?: string - 完整的导入路径。
  • split?: string - 分隔符。
  • needRelativePath?: boolean - 是否需要相对路径,默认为 false
  • keyWordLength?: number - 取翻译前多少个单词为 key,默认为 10
  • keyAddSource?: boolean - key 是否加上中文,默认为 false

baiduConfig 子属性

baiduConfig 对象包含以下属性:

  • appId: number - 百度翻译服务的应用程序 ID。
  • bdKey: string - 百度翻译服务的密钥。
  • to?: string[] - 目标语言数组。

deyi 子属性

deyi 对象包含以下属性:

  • dominTag?: number - 域标签,涉及导出的相关配置。
  • pageKey?: string - 页面的 key。

使用示例

const i18nConfig: IAutoReplaceTextI18nConfig = {
  entry: 'path/to/entry/file',
  project: 'MyProject',
  // 其他配置...
};