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"}
}