用 dumi 发布一个用于处理枚举值的 npm 包

2023-09-25 11:56:18

前言

前端开发中，我们经常需要处理枚举值。例如，下拉框中的选项、状态码或错误代码。枚举值通常使用数字或字符串表示，但有时我们需要将它们转换为更易读的文本。

为了解决这个问题，我们可以创建一个 npm 包来处理枚举值。这个包可以将枚举值转换为文本，也可以将文本转换为枚举值。

创建项目

首先，我们需要创建一个新的 npm 项目。我们可以使用以下命令：

npx create-react-app my-enum-package

这将创建一个新的 React 项目。接下来，我们需要安装 dumi。我们可以使用以下命令：

npm install dumi

安装完成后，我们需要在项目中添加一个 TypeScript 配置文件。我们可以创建一个名为 tsconfig.json 的文件，并添加以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "allowSyntheticDefaultImports": true
  }
}

编写代码

接下来，我们需要编写代码。首先，我们需要创建一个新的 TypeScript 文件。我们可以创建一个名为 index.ts 的文件，并添加以下内容：

export enum MyEnum {
  A = 1,
  B = 2,
  C = 3
}

export function toText(value: MyEnum): string {
  switch (value) {
    case MyEnum.A:
      return "A";
    case MyEnum.B:
      return "B";
    case MyEnum.C:
      return "C";
    default:
      return "";
  }
}

export function toValue(text: string): MyEnum | undefined {
  switch (text) {
    case "A":
      return MyEnum.A;
    case "B":
      return MyEnum.B;
    case "C":
      return MyEnum.C;
    default:
      return undefined;
  }
}