使用TypeScript + React + JSX + MUI + React Query自己制作一个npm包

1 年 ago

新, 韵

2 minutes

首先

パッケージを公開するときに必要な認証周りについては特に触れていない

请你用中文直接改写以下内容，只需要提供一个选项：

“The weather is very hot today.”

首先创建一个最小的 npm 包，然后逐渐进行扩展。

1. 最小的npm软件包

{
  "name": "@penguinshunya/hoge",
  "version": "0.0.1"
}

只需4行代码即可完成npm包的制作。

2. 在 GitHub Packages 上发布

{
  "name": "@penguinshunya/hoge",
  "version": "0.0.2",
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/"
  }
}

或者，可以使用以下命令来设置注册表。

npm config set @penguinshunya:registry=https://npm.pkg.github.com/

执行此设置后，将不再需要“publishConfig”的设定。

3. 反应

{
  "name": "@penguinshunya/hoge",
  "version": "0.0.3",
  "peerDependencies": {
    "react": "^18.2.0"
  }
}

const { createElement } = require("react");
exports.HelloWorld = () => createElement("div", null, "hello, world");

4. 反应+类型脚本

{
  "name": "@penguinshunya/hoge",
  "version": "0.0.4",
  "peerDependencies": {
    "react": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.4.1",
    "@types/react": "^18.2.14",
    "typescript": "^5.1.6"
  }
}

import { createElement } from "react";

export const HelloWorld = () => {
  return createElement("div", null, "hello, world");
}

用以下指令创建 index.js 文件。

npx tsc index.ts

5. 反应 + TypeScript + JSX

{
  "name": "@penguinshunya/hoge",
  "version": "0.0.5",
  "peerDependencies": {
    "react": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.4.1",
    "@types/react": "^18.2.14",
    "typescript": "^5.1.6"
  }
}

import * as React from "react";

export function HelloWorld() {
  return <div>hello, world</div>;
}

用以下命令创建 index.js 文件。

npx tsc index.tsx --jsx react

只需使用TSC命令就可以将.tsx文件转换为.js文件。

6. React + TypeScript + JSX + MUI

6. 反应+ TypeScript + JSX + MUI

{
  "name": "@penguinshunya/hoge",
  "version": "0.0.6",
  "peerDependencies": {
    "react": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.4.1",
    "@types/react": "^18.2.14",
    "typescript": "^5.1.6"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.0"
  }
}

import { Button, ButtonProps } from "@mui/material";
import * as React from "react";

export type MyButtonProps = ButtonProps;

export function MyButton({ ...props }: MyButtonProps) {
  return <Button variant="outlined" size="small" {...props} />
}

使用以下命令创建 index.js 文件。

npx tsc index.tsx --jsx react --allowSyntheticDefaultImports
# --allowSyntheticDefaultImports を付けないと以下のエラーが発生する
# Module '"/path/to/hoge/node_modules/@types/prop-types/index"' has no default export.

7. React + TypeScript + JSX + MUI + React Query
反应+ TypeScript + JSX + MUI + React 查询

{
  "name": "@penguinshunya/hoge",
  "version": "0.0.7",
  "peerDependencies": {
    "react": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.4.1",
    "@types/react": "^18.2.14",
    "typescript": "^5.1.6"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.0",
    "@tanstack/react-query": "^4.29.19"
  }
}

import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from "@tanstack/react-query";
import * as React from "react";

const queryClient = new QueryClient();

export interface APIProviderProps {
  children?: React.ReactNode;
}

export function APIProvider({ children }: APIProviderProps) {
  return (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
}

export function useListMember() {
  return useQuery(["ListMember"], async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    return [
      { id: 1, name: "foo" },
      { id: 2, name: "bar" },
    ];
  });
}

用下列命令创建 index.js 文件。

npx tsc index.tsx --jsx react --allowSyntheticDefaultImports

首先