react+vite+ts 组件模板

1.创建项目

npm create vite@latest my-app --template react-ts

2.配置项目 tsconfig.json

{"compilerOptions": {"target": "ES2020","useDefineForClassFields": true,"lib": ["ES2020", "DOM", "DOM.Iterable"],"module": "ESNext","skipLibCheck": true,"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx","strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]}},"include": ["src"],"references": [{ "path": "./tsconfig.node.json" }]
}

3.配置vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';export default defineConfig({plugins: [react()],resolve: {alias: {'@': path.resolve(__dirname, './src'),},},
});

4.package.json中添加构建脚本

--report-unused-disable-directives 的作用

在 ESLint 中，eslint-disable 指令用于临时禁用某些规则，通常用于特殊情况，比如当你知道某个规则在某个地方不适用时。这些指令可以放在文件顶部或行内。

// eslint-disable-next-line no-unused-vars
const unusedVariable = 42;

"scripts": {"dev": "vite","build": "tsc && vite build","lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview": "vite preview"
}

5.准备发布

{"name": "my-component-library","version": "1.0.0","description": "A collection of reusable React components","main": "dist/index.js","module": "dist/index.js","types": "dist/index.d.ts","files": ["dist"],"peerDependencies": {"react": "^18.0.0","react-dom": "^18.0.0"},"devDependencies": {"@types/react": "^18.0.0","@types/react-dom": "^18.0.0","typescript": "^5.0.0","vite-plugin-dts": "^1.0.0"}
}