react+ts新建插件上传npm

1. 创建项目结构
   首先，创建一个新的文件夹并初始化一个新的 npm 项目：

mkdir my-react-plugin
cd my-react-plugin
npm init -y

2. 安装开发依赖
   安装 React、TypeScript 以及其他开发依赖：（node版本20.8.0，npm版本10.0.0，版本太低下载依赖报错）。

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom

3. 设置 TypeScript 配置
   创建 tsconfig.json 文件，并添加基本配置：（手动新建文件）

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "jsx": "react",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}

4. 创建组件
   在 src 文件夹中创建你的插件代码。例如，创建 MyComponent.tsx

// src/MyComponent.tsx
import React from 'react';

interface MyComponentProps {
  title: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ title }) => {
  return <h1>{title}</h1>;
};

export default MyComponent;

在 src/index.ts 中导出你的组件：

// src/index.ts
export { default as MyComponent } from './MyComponent';

5. 编写打包脚本
   在 package.json 中添加构建脚本：

"scripts": {
  "build": "tsc"
}

6. 打包组件
   运行构建命令，生成 dist 文件夹：

npm run build

7. 添加 npm 信息
   在 package.json 中，确保以下字段已正确设置：

{
  "name": "my-react-plugin",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "peerDependencies": {
    "react": "^17.0.0 || ^18.0.0",
    "react-dom": "^17.0.0 || ^18.0.0"
  },
  "files": [
    "dist/**/*"
  ]
}

8. 登录 npm
   如果你还没有登录 npm，可以使用以下命令，注意npm是否使用的淘宝镜像，如果是淘宝镜像需要更换官方地址，然后登录。

npm login

9. 发布到 npm
   最后，运行以下命令发布你的插件：（插件名称不能重复）

npm publish --access public

10. 测试插件
    发布后，你可以在其他项目中使用你的插件：

npm install my-react-plugin

然后在 React 项目中引入并使用：

import { MyComponent } from 'my-react-plugin';

const App = () => {
  return <MyComponent title="Hello, World!" />;
};

以上为新建插件并上传npm