介绍
resx2tsjs 是一款 npm 包,它用于将 .resx 格式的本地化资源文件自动转换为 TypeScript 中的对象,并生成一个 TypeScript 的定义文件,方便前端开发人员调用。
使用 resx2tsjs 的好处:
- 方便前端获取本地化资源数据。
- TypeScript 的定义文件可以提高代码可维护性和可读性。
- 一次设置,无需手工更改。
安装
npm install resx2tsjs
使用
在使用之前,需要将 resx2tsjs 的配置文件 resx2tsjs.json 放在项目根目录下,并填写相关配置。
resx2tsjs 支持两种模式:命令行模式和 API 模式。
命令行模式
命令行模式操作简单,直接使用命令行调用即可。
resx2tsjs [files] [options]
其中,files 是指定需要转换的 .resx 文件路径,可以直接指定文件名或使用通配符 *。而 options 则是指定输出相关的配置项,具体配置项可见下方示例。
API 模式
API 模式需要手动调用方法来执行转换操作。可以将其封装为自己项目的构建脚本中。
-- -------------------- ---- ------- ------ - --------------- - ---- ------------ ----------------- -------------- ---------------------- --------------- --------------------- ------------------------- ----------------------- ------------------ ------- ------------ - - --
示例
假设我们有两个本地化资源文件 en.resx 和 zh.resx,其内容分别为:
-- -------------------- ---- ------- ---- ------- --- ----- ------------- ------------------ ------ ------ ------------ --------------------- ----------- ------------- -------- ------ -------------- --------------------- ------------------- -------- ------ -------------- --------------------- ----------------------- -------- ------- ---- ------- --- ----- ------------- ------------------ ------ ------ ------------ --------------------- --------------------- -------- ------ -------------- --------------------- ------------------- -------- ------ -------------- --------------------- ------------------- -------- -------
我们可以定义一个新的配置文件 resx2tsjs.json:
{ "resxFilePaths": ["./src/i18n/*.resx"], "outputFilePath": "./src/i18n/i18n.ts", "outputDefinitionFilePath": "./src/i18n/i18n.d.ts", "rootInterfaceName": "I18n", "indentation": " " }
然后,我们使用命令行模式调用:
resx2tsjs ./src/i18n/*.resx --rootInterfaceName I18n
或者,我们将其封装为如下的 API 调用:
-- -------------------- ---- ------- ------ - --------------- - ---- ------------ ----------------- -------------- ---------------------- --------------- --------------------- ------------------------- ----------------------- ------------------ ------- ------------ - - --
得到的 i18n.ts 文件内容如下:
-- -------------------- ---- ------- ------ --------- ---- - ------ ------- -------- ------- -------- ------- - ------ ----- --- ---- - - ------ --- ------- -------- ----- -------- --------- -- ------ ----- --- ---- - - ------ ------- -------- ----- -------- ----- --
同时还会生成 i18n.d.ts 文件,其内容如下:
export interface I18n { Title: string; Button1: string; Button2: string; } export declare const en: I18n; export declare const zh: I18n;
现在,在前端项目中,我们只需要使用如下的方式,即可获取本地化资源数据:
import { en, zh } from "./i18n/i18n"; console.log(en.Title); // My Title console.log(zh.Title); // 我的标题
总结
resx2tsjs 是一款非常方便的 npm 包,可以自动将本地化资源文件转换为 TypeScript 中的对象,并生成 TypeScript 的定义文件。它的使用方式简单方便,只需要简单的配置即可进行操作。使用它可以方便整理项目中的本地化资源,并提高代码的可读性和可维护性。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600668f5d9381d61a3540eb1