mm
This commit is contained in:
1
.npmrc
1
.npmrc
@@ -1 +1,2 @@
|
|||||||
registry = https://registry.npmmirror.com/
|
registry = https://registry.npmmirror.com/
|
||||||
|
hoist=false
|
||||||
11
apps/ui-site/index.html
Normal file
11
apps/ui-site/index.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>DefGov UI Web</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,34 +1,43 @@
|
|||||||
{
|
{
|
||||||
"name": "vite-react-template",
|
"name": "ui-site",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"sideEffects": ["*.css"],
|
"sideEffects": [
|
||||||
|
"*.css"
|
||||||
|
],
|
||||||
"module": "./dist/index.es.js",
|
"module": "./dist/index.es.js",
|
||||||
"main": "./dist/index.cjs.js",
|
"main": "./dist/index.cjs.js",
|
||||||
"types": "./dist/index.d.ts",
|
"types": "./dist/index.d.ts",
|
||||||
"style": "./dist/index.css",
|
"style": "./dist/index.css",
|
||||||
"exports": {
|
"exports": {
|
||||||
".": {
|
".": {
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
"import": "./dist/index.es.js",
|
"import": "./dist/index.es.js",
|
||||||
"require": "./dist/index.cjs.js",
|
"require": "./dist/index.cjs.js"
|
||||||
"types": "./dist/index.d.ts"
|
|
||||||
},
|
},
|
||||||
"./index.css": "./dist/index.css"
|
"./index.css": "./dist/index.css"
|
||||||
},
|
},
|
||||||
"files": ["dist"],
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "vite build --tsconfig tsconfig.build.json"
|
"build": "tsc -p tsconfig.build.json && vite build"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^25.6.0",
|
"@types/node": "^25.6.0",
|
||||||
"@types/react": "^19.2.14",
|
"@types/react": "^19.2.14",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"@vitejs/plugin-react": "^6.0.1",
|
"@vitejs/plugin-react": "~5.2.0",
|
||||||
"glob": "^13.0.6",
|
"glob": "^13.0.6",
|
||||||
"typescript": "^6.0.3",
|
"typescript": "~6.0.3",
|
||||||
"vite": "^8.0.9",
|
"vite": "~7.3.2",
|
||||||
"vite-plugin-dts": "^4.5.4"
|
"vite-plugin-dts": "^4.5.4"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@defgov/ui-web": "workspace:*",
|
||||||
|
"react": "^19.2.5",
|
||||||
|
"react-dom": "^19.2.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
9
apps/ui-site/src/App.tsx
Normal file
9
apps/ui-site/src/App.tsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { ButtonGallery } from "./gallery/ButtonGallery";
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ButtonGallery />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
9
apps/ui-site/src/common/CommonProps.ts
Normal file
9
apps/ui-site/src/common/CommonProps.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import { type CSSProperties, type ReactNode } from "react";
|
||||||
|
|
||||||
|
export type CommonProps = {
|
||||||
|
className?: string;
|
||||||
|
style?: CSSProperties;
|
||||||
|
children?: ReactNode;
|
||||||
|
disabled?: boolean;
|
||||||
|
key?: string;
|
||||||
|
};
|
||||||
17
apps/ui-site/src/common/InnerWrapper.tsx
Normal file
17
apps/ui-site/src/common/InnerWrapper.tsx
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
import { ReactNode } from "react";
|
||||||
|
|
||||||
|
export const InnerWrapper = ({ children }: { children: ReactNode }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
gap: "30px",
|
||||||
|
display: "flex",
|
||||||
|
flexWrap: "nowrap",
|
||||||
|
margin: "50px",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
16
apps/ui-site/src/common/OuterWrapper.tsx
Normal file
16
apps/ui-site/src/common/OuterWrapper.tsx
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { ReactNode } from "react";
|
||||||
|
|
||||||
|
export const OuterWrapper = ({ children }: { children: ReactNode }) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
gap: "30px",
|
||||||
|
display: "flex",
|
||||||
|
flexWrap: "nowrap",
|
||||||
|
flexDirection: "column",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
22
apps/ui-site/src/gallery/ButtonGallery.tsx
Normal file
22
apps/ui-site/src/gallery/ButtonGallery.tsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import { Button, DownloadSvg } from "@defgov/ui-web";
|
||||||
|
import { InnerWrapper } from "../common/InnerWrapper";
|
||||||
|
import { OuterWrapper } from "../common/OuterWrapper";
|
||||||
|
|
||||||
|
export const ButtonGallery = () => {
|
||||||
|
return (
|
||||||
|
<OuterWrapper>
|
||||||
|
<InnerWrapper>
|
||||||
|
<Button size="xs">xsmall</Button>
|
||||||
|
<Button size="xs" iconSvg={<DownloadSvg />}>
|
||||||
|
xsmall
|
||||||
|
</Button>
|
||||||
|
<Button size="xs" iconSvg={<DownloadSvg />} iconOnly>
|
||||||
|
xsmall
|
||||||
|
</Button>
|
||||||
|
<Button size="sm">sm</Button>
|
||||||
|
<Button size="md">md</Button>
|
||||||
|
<Button size="lg">lg</Button>
|
||||||
|
</InnerWrapper>
|
||||||
|
</OuterWrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
8
apps/ui-site/src/main.tsx
Normal file
8
apps/ui-site/src/main.tsx
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import App from "./App";
|
||||||
|
import "@defgov/ui-web/index.css";
|
||||||
|
|
||||||
|
const container = document.getElementById("root")!;
|
||||||
|
const root = createRoot(container);
|
||||||
|
|
||||||
|
root.render(<App />);
|
||||||
26
apps/ui-site/tsconfig.base.json
Normal file
26
apps/ui-site/tsconfig.base.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
// tsconfig.base.json,用于被 tesconfig.json 和 tesconfig.build.json 继承
|
||||||
|
"compilerOptions": {
|
||||||
|
// 输出模块语法,使用版本号最新的那个,而不是实验性语法 ESNext
|
||||||
|
"module": "es2022",
|
||||||
|
|
||||||
|
// 模块解析策略,模拟 Vite / Rollup / webpack,支持 exports / imports,不强制 Node ESM 的严格规则
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
|
||||||
|
// 显式声明使用的类型包
|
||||||
|
"types": ["node", "react", "react-dom"],
|
||||||
|
|
||||||
|
// 允许 ESM 导入 CJS
|
||||||
|
"esModuleInterop": true,
|
||||||
|
|
||||||
|
// 跳过 node_modules 类型检查,加快构建,避免第三方类型污染
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 只做类型检查,不生成 JS 输出
|
||||||
|
* - 适用于 Vite / Next / Nuxt 等 bundler 场景
|
||||||
|
* - 防止 tsc 与构建工具重复 emit
|
||||||
|
*/
|
||||||
|
"noEmit": true
|
||||||
|
}
|
||||||
|
}
|
||||||
108
apps/ui-site/tsconfig.build.json
Normal file
108
apps/ui-site/tsconfig.build.json
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
{
|
||||||
|
// 此文件仅用于类型检查,不用于类型检查,构建时会指定使用 tsconfig.build.json
|
||||||
|
"extends": "./tsconfig.base.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
// Browser api,需要加 "DOM","DOM.Iterable"
|
||||||
|
// Node api,需要加 "ES2025",始终使用带版本号的最新版本
|
||||||
|
// NextJs api,属于同构,server 端会预处理 DOM,计算url,三个都需要 "ES2025", "DOM", "DOM.Iterable"
|
||||||
|
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显式声明使用的类型包
|
||||||
|
* - node:Node.js API
|
||||||
|
* - react:JSX / React 类型
|
||||||
|
* - vite/client:import.meta / env
|
||||||
|
*/
|
||||||
|
"types": ["node", "react", "react-dom"],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* React JSX 编译模式
|
||||||
|
* - 使用 React 17+ 新 JSX Transform
|
||||||
|
* - 不需要手动 import React
|
||||||
|
*/
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编译输出目录
|
||||||
|
* - tsc / tsc -b 都会用到
|
||||||
|
*/
|
||||||
|
"outDir": "./dist",
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 源码根目录
|
||||||
|
* - 确保 dist 结构与 src 一致
|
||||||
|
* - 对 declaration 路径至关重要
|
||||||
|
*/
|
||||||
|
"rootDir": "./src",
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生成 .d.ts 类型声明文件
|
||||||
|
* - 组件库 / npm 包发布必需
|
||||||
|
* - 对应用项目无害,仅影响类型输出
|
||||||
|
*/
|
||||||
|
"declaration": true,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 强制单文件可独立编译
|
||||||
|
* - 适配 esbuild / SWC / bundler 编译模型
|
||||||
|
* - 禁止依赖跨文件类型推断(enum / namespace 等)
|
||||||
|
*/
|
||||||
|
"isolatedModules": true
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 参与类型检查和编译的文件
|
||||||
|
* - 只扫描 src
|
||||||
|
* - 其它目录通过 exclude 排除
|
||||||
|
*/
|
||||||
|
"include": ["src"],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 明确排除非源码内容
|
||||||
|
* - 避免污染类型系统
|
||||||
|
* - 防止误入 dist / test / config
|
||||||
|
* - 保证发布包干净
|
||||||
|
*/
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"dist",
|
||||||
|
|
||||||
|
// ---------- build / cache ----------
|
||||||
|
".turbo/**/*",
|
||||||
|
".cache/**/*",
|
||||||
|
".vite/**/*",
|
||||||
|
|
||||||
|
// ---------- 配置文件 ----------
|
||||||
|
"vite.config.ts",
|
||||||
|
"*.config.ts",
|
||||||
|
"*.config.js",
|
||||||
|
"tsconfig.*.json",
|
||||||
|
|
||||||
|
// ---------- 测试相关 ----------
|
||||||
|
"__tests__/**/*",
|
||||||
|
"test/**/*",
|
||||||
|
"tests/**/*",
|
||||||
|
"**/*.test.ts",
|
||||||
|
"**/*.test.tsx",
|
||||||
|
"**/*.spec.ts",
|
||||||
|
"**/*.spec.tsx",
|
||||||
|
|
||||||
|
// ---------- Storybook ----------
|
||||||
|
".storybook/**/*",
|
||||||
|
"stories/**/*",
|
||||||
|
|
||||||
|
// ---------- 示例 / 脚本 ----------
|
||||||
|
"example/**/*",
|
||||||
|
"examples/**/*",
|
||||||
|
"scripts/**/*",
|
||||||
|
|
||||||
|
// ---------- 环境与静态资源 ----------
|
||||||
|
".env",
|
||||||
|
".env.*",
|
||||||
|
"public/**/*",
|
||||||
|
|
||||||
|
// ---------- 文档 ----------
|
||||||
|
"docs/**/*",
|
||||||
|
"README.md",
|
||||||
|
"LICENSE"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -6,11 +6,12 @@
|
|||||||
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
||||||
|
|
||||||
//显式声明使用的类型包,避免找不到模块
|
//显式声明使用的类型包,避免找不到模块
|
||||||
"types": ["node", "react", "vite/client"],
|
"types": ["node", "react", "react-dom"],
|
||||||
|
|
||||||
// React JSX 编译模式
|
// React JSX 编译模式
|
||||||
"jsx": "react-jsx"
|
"jsx": "react-jsx"
|
||||||
},
|
},
|
||||||
// 将类型检查范围扩大至整个子项目,而不只是 src 文件夹,
|
// 将类型检查范围扩大至整个子项目,而不只是 src 文件夹,
|
||||||
"include": ["**/*"]
|
"include": ["**/*"]
|
||||||
|
|
||||||
}
|
}
|
||||||
16
apps/ui-site/vite.config.ts
Normal file
16
apps/ui-site/vite.config.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { defineConfig } from "vite"
|
||||||
|
import react from "@vitejs/plugin-react"
|
||||||
|
import dts from "vite-plugin-dts"
|
||||||
|
import { genIndexTsPlugin } from "./scripts-plugin/vite-plugin-gen-index-ts"
|
||||||
|
import { genIndexCssPlugin } from "./scripts-plugin/vite-plugin-gen-index-css"
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
genIndexTsPlugin(),
|
||||||
|
genIndexCssPlugin(),
|
||||||
|
react(),
|
||||||
|
dts({
|
||||||
|
insertTypesEntry: true,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
})
|
||||||
@@ -12,9 +12,5 @@
|
|||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=20"
|
"node": ">=20"
|
||||||
},
|
},
|
||||||
"workspaces": [
|
|
||||||
"packages/*",
|
|
||||||
"app/*"
|
|
||||||
],
|
|
||||||
"packageManager": "pnpm@11.0.0-rc.5+sha512.c469fb6aa13a99e57aec935cd7b86ff422701f4602ecac2231d3dc20910586ebfb6b50a7b455d0778ec22ae56912d8d8e88e9f9e0a03c0875a6a41783a94a1bd"
|
"packageManager": "pnpm@11.0.0-rc.5+sha512.c469fb6aa13a99e57aec935cd7b86ff422701f4602ecac2231d3dc20910586ebfb6b50a7b455d0778ec22ae56912d8d8e88e9f9e0a03c0875a6a41783a94a1bd"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,9 +12,9 @@
|
|||||||
"style": "./dist/index.css",
|
"style": "./dist/index.css",
|
||||||
"exports": {
|
"exports": {
|
||||||
".": {
|
".": {
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
"import": "./dist/index.es.js",
|
"import": "./dist/index.es.js",
|
||||||
"require": "./dist/index.cjs.js",
|
"require": "./dist/index.cjs.js"
|
||||||
"types": "./dist/index.d.ts"
|
|
||||||
},
|
},
|
||||||
"./index.css": "./dist/index.css"
|
"./index.css": "./dist/index.css"
|
||||||
},
|
},
|
||||||
@@ -22,19 +22,22 @@
|
|||||||
"dist"
|
"dist"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"gen-css": "ts-node scripts/gen-index-css.ts",
|
||||||
"build": "vite build --tsconfig tsconfig.build.json"
|
"gen-ts": "ts-node scripts/gen-index-ts.ts",
|
||||||
|
"gen-index": "pnpm run gen-css && pnpm run gen-ts",
|
||||||
|
"dev": "pnpm run gen-index && vite build --watch",
|
||||||
|
"build": "pnpm run gen-index && tsc -p tsconfig.build.json && vite build"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/vite": "^4.2.4",
|
"@tailwindcss/vite": "^4.2.4",
|
||||||
"@types/node": "^25.6.0",
|
"@types/node": "^25.6.0",
|
||||||
"@types/react": "^19.2.14",
|
"@types/react": "^19.2.14",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"@vitejs/plugin-react": "^6.0.1",
|
"@vitejs/plugin-react": "~5.2.0",
|
||||||
"glob": "^13.0.6",
|
"glob": "^13.0.6",
|
||||||
"ts-node": "^10.9.2",
|
"ts-node": "^10.9.2",
|
||||||
"typescript": "^6.0.3",
|
"typescript": "~6.0.3",
|
||||||
"vite": "^8.0.9",
|
"vite": "~7.3.2",
|
||||||
"vite-plugin-dts": "^4.5.4"
|
"vite-plugin-dts": "^4.5.4"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
// plugins/vite-plugin-gen-index-ts.ts
|
|
||||||
import type { Plugin } from "vite";
|
|
||||||
import fs from "fs";
|
import fs from "fs";
|
||||||
import path from "path";
|
import path from "path";
|
||||||
import { globSync } from "glob";
|
import { globSync } from "glob";
|
||||||
@@ -68,7 +66,10 @@ function generateIndexFile(dirPath: string) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const validFiles = allFiles.filter(isValidFile);
|
const validFiles = allFiles.filter(isValidFile);
|
||||||
if (validFiles.length === 0) return;
|
if (validFiles.length === 0) {
|
||||||
|
console.log("⚠️ 未找到符合条件的文件,跳过生成 index.ts");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
validFiles.sort();
|
validFiles.sort();
|
||||||
|
|
||||||
@@ -88,42 +89,33 @@ ${exportStatements.join("\n")}
|
|||||||
|
|
||||||
const indexFilePath = path.resolve(dirPath, "index.ts");
|
const indexFilePath = path.resolve(dirPath, "index.ts");
|
||||||
|
|
||||||
// ✅ 内容比对,避免无限 rebuild
|
// ✅ 内容比对,避免重复写入
|
||||||
if (fs.existsSync(indexFilePath)) {
|
if (fs.existsSync(indexFilePath)) {
|
||||||
const old = fs.readFileSync(indexFilePath, "utf8");
|
const old = fs.readFileSync(indexFilePath, "utf8");
|
||||||
if (old === indexContent) return;
|
if (old === indexContent) {
|
||||||
|
console.log("✅ index.ts 内容无变化,无需重新生成");
|
||||||
|
return;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fs.writeFileSync(indexFilePath, indexContent, "utf8");
|
fs.writeFileSync(indexFilePath, indexContent, "utf8");
|
||||||
|
console.log(`✅ 成功生成 index.ts: ${indexFilePath}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function genIndexTsPlugin(): Plugin {
|
// 脚本入口
|
||||||
return {
|
const [targetDir] = CONFIG.targetDirs;
|
||||||
name: "vite-plugin-gen-index-ts",
|
if (!targetDir) {
|
||||||
apply: "build",
|
console.error("❌ CONFIG.targetDirs 不能为空");
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
buildStart() {
|
const absTargetDir = path.resolve(process.cwd(), targetDir);
|
||||||
const [targetDir] = CONFIG.targetDirs;
|
|
||||||
if (!targetDir) {
|
|
||||||
this.error("CONFIG.targetDirs is empty");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const absTargetDir = path.resolve(process.cwd(), targetDir);
|
try {
|
||||||
|
console.log(`🚀 开始扫描目录: ${absTargetDir}`);
|
||||||
try {
|
|
||||||
generateIndexFile(absTargetDir);
|
generateIndexFile(absTargetDir);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
const msg = err instanceof Error ? err.message : String(err);
|
const msg = err instanceof Error ? err.message : String(err);
|
||||||
this.error(`[gen-index-ts] failed: ${msg}`);
|
console.error(`❌ [gen-index-ts] 执行失败: ${msg}`);
|
||||||
throw err;
|
process.exit(1);
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
handleHotUpdate({ file }) {
|
|
||||||
if (file.replace(/\\/g, "/").endsWith("/src/index.ts")) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
121
packages/ui-web/scripts/gen-index-ts.ts
Normal file
121
packages/ui-web/scripts/gen-index-ts.ts
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
import fs from "fs";
|
||||||
|
import path from "path";
|
||||||
|
import { globSync } from "glob";
|
||||||
|
|
||||||
|
interface Config {
|
||||||
|
targetDirs: string[];
|
||||||
|
includeExtensions: string[];
|
||||||
|
excludeKeywords: {
|
||||||
|
dirs: string[];
|
||||||
|
fileSuffixes: string[];
|
||||||
|
filePatterns: RegExp[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const CONFIG: Config = {
|
||||||
|
targetDirs: ["src"],
|
||||||
|
includeExtensions: [".ts", ".tsx", ".vue"],
|
||||||
|
excludeKeywords: {
|
||||||
|
dirs: ["__tests__", "tests", "story", "stories", "types"],
|
||||||
|
fileSuffixes: [".d.ts"],
|
||||||
|
filePatterns: [
|
||||||
|
/^index\.(ts|tsx|js|jsx)$/,
|
||||||
|
/\.(test|spec)\./,
|
||||||
|
/\.(story|stories)\./,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizePath = (p: string) => p.replace(/\\/g, "/");
|
||||||
|
|
||||||
|
const isInExcludeDir = (filePath: string) => {
|
||||||
|
const normalized = normalizePath(filePath);
|
||||||
|
return CONFIG.excludeKeywords.dirs.some((dir) =>
|
||||||
|
normalized.includes(`/${dir}/`),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isExcludeSuffix = (filePath: string) =>
|
||||||
|
CONFIG.excludeKeywords.fileSuffixes.some((suffix) =>
|
||||||
|
filePath.endsWith(suffix),
|
||||||
|
);
|
||||||
|
|
||||||
|
const isMatchExcludePattern = (fileName: string) =>
|
||||||
|
CONFIG.excludeKeywords.filePatterns.some((pattern) => pattern.test(fileName));
|
||||||
|
|
||||||
|
function isValidFile(filePath: string): boolean {
|
||||||
|
const fileName = filePath.split(/[\\/]/).pop()!;
|
||||||
|
|
||||||
|
if (isInExcludeDir(filePath)) return false;
|
||||||
|
if (isExcludeSuffix(filePath)) return false;
|
||||||
|
if (isMatchExcludePattern(fileName)) return false;
|
||||||
|
|
||||||
|
const ext = path.extname(filePath);
|
||||||
|
return CONFIG.includeExtensions.includes(ext);
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateIndexFile(dirPath: string) {
|
||||||
|
const searchPattern = path.resolve(dirPath, "**", "*.*");
|
||||||
|
|
||||||
|
const allFiles = globSync(searchPattern, {
|
||||||
|
nodir: true,
|
||||||
|
absolute: true,
|
||||||
|
windowsPathsNoEscape: true,
|
||||||
|
dot: false,
|
||||||
|
follow: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const validFiles = allFiles.filter(isValidFile);
|
||||||
|
if (validFiles.length === 0) {
|
||||||
|
console.log("⚠️ 未找到符合条件的文件,跳过生成 index.ts");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
validFiles.sort();
|
||||||
|
|
||||||
|
const exportStatements = validFiles.map((file) => {
|
||||||
|
const relPath = path.relative(dirPath, file);
|
||||||
|
const importPath = `./${relPath
|
||||||
|
.replace(/\.[^.]+$/, "")
|
||||||
|
.replace(/\\/g, "/")}`;
|
||||||
|
return `export * from '${importPath}';`;
|
||||||
|
});
|
||||||
|
|
||||||
|
const indexContent = `
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
${exportStatements.join("\n")}
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
const indexFilePath = path.resolve(dirPath, "index.ts");
|
||||||
|
|
||||||
|
// ✅ 内容比对,避免重复写入
|
||||||
|
if (fs.existsSync(indexFilePath)) {
|
||||||
|
const old = fs.readFileSync(indexFilePath, "utf8");
|
||||||
|
if (old === indexContent) {
|
||||||
|
console.log("✅ index.ts 内容无变化,无需重新生成");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fs.writeFileSync(indexFilePath, indexContent, "utf8");
|
||||||
|
console.log(`✅ 成功生成 index.ts: ${indexFilePath}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 脚本入口
|
||||||
|
const [targetDir] = CONFIG.targetDirs;
|
||||||
|
if (!targetDir) {
|
||||||
|
console.error("❌ CONFIG.targetDirs 不能为空");
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const absTargetDir = path.resolve(process.cwd(), targetDir);
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log(`🚀 开始扫描目录: ${absTargetDir}`);
|
||||||
|
generateIndexFile(absTargetDir);
|
||||||
|
} catch (err) {
|
||||||
|
const msg = err instanceof Error ? err.message : String(err);
|
||||||
|
console.error(`❌ [gen-index-ts] 执行失败: ${msg}`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { cn } from "tailwind-variants";
|
import { cn } from "tailwind-variants";
|
||||||
import { CommonProps } from "./CommonProps";
|
import { type CommonProps } from "./CommonProps";
|
||||||
|
|
||||||
// 别名<约束>=值
|
// 别名<约束>=值
|
||||||
// 千万不要 C = As extend React.ElementType,这样子连等号,会切断推导
|
// 千万不要 C = As extend React.ElementType,这样子连等号,会切断推导
|
||||||
@@ -22,8 +22,7 @@ const Box = <C extends React.ElementType = "div">(
|
|||||||
) => {
|
) => {
|
||||||
const { as: Component = "div", children, className, ...rest } = props;
|
const { as: Component = "div", children, className, ...rest } = props;
|
||||||
|
|
||||||
|
const boxRootClass = cn(className);
|
||||||
const boxRootClass = cn( className);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Component ref={ref} className={boxRootClass} {...(rest as any)}>
|
<Component ref={ref} className={boxRootClass} {...(rest as any)}>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { CSSProperties, ReactNode } from "react";
|
import { type CSSProperties, type ReactNode } from "react";
|
||||||
|
|
||||||
export type CommonProps = {
|
export type CommonProps = {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
|||||||
@@ -48,10 +48,10 @@ export const Button = (props: ButtonProps) => {
|
|||||||
{iconSvg ? (
|
{iconSvg ? (
|
||||||
hideIcon ? (
|
hideIcon ? (
|
||||||
iconOnly ? (
|
iconOnly ? (
|
||||||
<Icon />
|
<Icon size={size} />
|
||||||
) : null
|
) : null
|
||||||
) : (
|
) : (
|
||||||
<Icon svg={iconSvg} />
|
<Icon size={size} svg={iconSvg} />
|
||||||
)
|
)
|
||||||
) : null}
|
) : null}
|
||||||
{!iconOnly && children}
|
{!iconOnly && children}
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
|
|
||||||
|
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
|
||||||
export * from './assets/svg/BoldSvg';
|
export * from './assets/svg/BoldSvg';
|
||||||
|
|||||||
@@ -17,24 +17,6 @@
|
|||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
|
|
||||||
// 跳过 node_modules 类型检查,加快构建,避免第三方类型污染
|
// 跳过 node_modules 类型检查,加快构建,避免第三方类型污染
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true
|
||||||
|
|
||||||
// 模块检测策略,不会影响 node_modules 中的第三方 CommonJS 依赖,Vite 会在预构建阶段自动将其转换为 ESM。
|
|
||||||
"moduleDetection": "force",
|
|
||||||
|
|
||||||
// 保留源码中的 import / export 语句原样输出,不进行自动转换(如 import → require),通常与 moduleDetection: "force" 搭配使用
|
|
||||||
"verbatimModuleSyntax": true,
|
|
||||||
|
|
||||||
// 是否检查“未使用的局部变量”
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
|
|
||||||
// 是否检查“未使用的函数参数”
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
|
|
||||||
// 是否只允许“可擦除的语法(Erasable Syntax),确保 TypeScript 语法在编译后可完全移除
|
|
||||||
"erasableSyntaxOnly": true,
|
|
||||||
|
|
||||||
// 是否禁止 switch 语句中的 case 贯穿(fallthrough),如果 case 没有 break / return,会报错
|
|
||||||
"noFallthroughCasesInSwitch": true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -42,33 +42,19 @@
|
|||||||
*/
|
*/
|
||||||
"declaration": true,
|
"declaration": true,
|
||||||
|
|
||||||
/**
|
|
||||||
* 只做类型检查,不生成 JS 输出
|
|
||||||
* - 适用于 Vite / Next / Nuxt 等 bundler 场景
|
|
||||||
* - 防止 tsc 与构建工具重复 emit
|
|
||||||
*/
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 强制单文件可独立编译
|
* 强制单文件可独立编译
|
||||||
* - 适配 esbuild / SWC / bundler 编译模型
|
* - 适配 esbuild / SWC / bundler 编译模型
|
||||||
* - 禁止依赖跨文件类型推断(enum / namespace 等)
|
* - 禁止依赖跨文件类型推断(enum / namespace 等)
|
||||||
*/
|
*/
|
||||||
"isolatedModules": true,
|
"isolatedModules": true
|
||||||
|
|
||||||
/**
|
|
||||||
* 允许在 import 中显式使用 .ts / .tsx 后缀
|
|
||||||
* - 兼容 Node ESM / bundler 对文件扩展名的严格要求
|
|
||||||
* - 避免 `import './foo'` 在 TS + ESM 下歧义
|
|
||||||
*/
|
|
||||||
"allowImportingTsExtensions": true
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 参与类型检查和编译的文件
|
* 参与类型检查和编译的文件
|
||||||
* - 只扫描 src
|
* - 只扫描 src
|
||||||
* - 其它目录通过 exclude 排除
|
* - 其它目录通过 exclude 排除
|
||||||
*/
|
*/
|
||||||
"include": ["src", "scripts"],
|
"include": ["src"],
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 明确排除非源码内容
|
* 明确排除非源码内容
|
||||||
|
|||||||
@@ -9,7 +9,14 @@
|
|||||||
"types": ["node", "react", "vite/client"],
|
"types": ["node", "react", "vite/client"],
|
||||||
|
|
||||||
// React JSX 编译模式
|
// React JSX 编译模式
|
||||||
"jsx": "react-jsx"
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 只做类型检查,不生成 JS 输出
|
||||||
|
* - 适用于 Vite / Next / Nuxt 等 bundler 场景
|
||||||
|
* - 防止 tsc 与构建工具重复 emit
|
||||||
|
*/
|
||||||
|
"noEmit": true
|
||||||
},
|
},
|
||||||
// 将类型检查范围扩大至整个子项目,而不只是 src 文件夹,
|
// 将类型检查范围扩大至整个子项目,而不只是 src 文件夹,
|
||||||
"include": ["**/*"]
|
"include": ["**/*"]
|
||||||
|
|||||||
@@ -3,13 +3,9 @@ import react from "@vitejs/plugin-react";
|
|||||||
import dts from "vite-plugin-dts";
|
import dts from "vite-plugin-dts";
|
||||||
import path from "path";
|
import path from "path";
|
||||||
import tailwindcss from "@tailwindcss/vite";
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
import { genIndexTsPlugin } from "./scripts-plugin/vite-plugin-gen-index-ts";
|
|
||||||
import { genIndexCssPlugin } from "./scripts-plugin/vite-plugin-gen-index-css";
|
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
genIndexTsPlugin(),
|
|
||||||
genIndexCssPlugin(),
|
|
||||||
react(),
|
react(),
|
||||||
tailwindcss(),
|
tailwindcss(),
|
||||||
dts({
|
dts({
|
||||||
|
|||||||
1057
pnpm-lock.yaml
generated
1057
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -3,4 +3,5 @@ packages:
|
|||||||
- "apps/*"
|
- "apps/*"
|
||||||
- "templates/*"
|
- "templates/*"
|
||||||
allowBuilds:
|
allowBuilds:
|
||||||
|
esbuild: false
|
||||||
sharp: false
|
sharp: false
|
||||||
|
|||||||
1
templates/vite-react-app/.npmrc
Normal file
1
templates/vite-react-app/.npmrc
Normal file
@@ -0,0 +1 @@
|
|||||||
|
registry = https://registry.npmmirror.com/
|
||||||
8
templates/vite-react-app/.vscode/settings.json
vendored
Normal file
8
templates/vite-react-app/.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"json.schemas": [
|
||||||
|
{
|
||||||
|
"fileMatch": ["/tsconfig.build.json", "/tsconfig.base.json"],
|
||||||
|
"schema": {}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
11
templates/vite-react-app/index.html
Normal file
11
templates/vite-react-app/index.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>DefGov UI Web</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
46
templates/vite-react-app/package.json
Normal file
46
templates/vite-react-app/package.json
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
{
|
||||||
|
"name": "vite-react-app",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"sideEffects": [
|
||||||
|
"*.css"
|
||||||
|
],
|
||||||
|
"module": "./dist/index.es.js",
|
||||||
|
"main": "./dist/index.cjs.js",
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
|
"style": "./dist/index.css",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"import": "./dist/index.es.js",
|
||||||
|
"require": "./dist/index.cjs.js",
|
||||||
|
"types": "./dist/index.d.ts"
|
||||||
|
},
|
||||||
|
"./index.css": "./dist/index.css"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"scripts": {
|
||||||
|
"gen-css": "ts-node scripts/gen-index-css.ts",
|
||||||
|
"gen-ts": "ts-node scripts/gen-index-ts.ts",
|
||||||
|
"gen-index": "pnpm run gen-css && pnpm run gen-ts",
|
||||||
|
"dev": "pnpm run gen-index && vite build --watch",
|
||||||
|
"build": "pnpm run gen-index && tsc -p tsconfig.build.json && vite build"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^25.6.0",
|
||||||
|
"@types/react": "^19.2.14",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "~5.2.0",
|
||||||
|
"glob": "^13.0.6",
|
||||||
|
"typescript": "~6.0.3",
|
||||||
|
"vite": "~7.3.2",
|
||||||
|
"vite-plugin-dts": "^4.5.4",
|
||||||
|
"ts-node": "^10.9.2"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^19.2.5",
|
||||||
|
"react-dom": "^19.2.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
121
templates/vite-react-app/scripts/gen-index-css.ts
Normal file
121
templates/vite-react-app/scripts/gen-index-css.ts
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
import fs from "fs";
|
||||||
|
import path from "path";
|
||||||
|
import { globSync } from "glob";
|
||||||
|
|
||||||
|
interface Config {
|
||||||
|
targetDirs: string[];
|
||||||
|
includeExtensions: string[];
|
||||||
|
excludeKeywords: {
|
||||||
|
dirs: string[];
|
||||||
|
fileSuffixes: string[];
|
||||||
|
filePatterns: RegExp[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const CONFIG: Config = {
|
||||||
|
targetDirs: ["src"],
|
||||||
|
includeExtensions: [".ts", ".tsx", ".vue"],
|
||||||
|
excludeKeywords: {
|
||||||
|
dirs: ["__tests__", "tests", "story", "stories", "types"],
|
||||||
|
fileSuffixes: [".d.ts"],
|
||||||
|
filePatterns: [
|
||||||
|
/^index\.(ts|tsx|js|jsx)$/,
|
||||||
|
/\.(test|spec)\./,
|
||||||
|
/\.(story|stories)\./,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizePath = (p: string) => p.replace(/\\/g, "/");
|
||||||
|
|
||||||
|
const isInExcludeDir = (filePath: string) => {
|
||||||
|
const normalized = normalizePath(filePath);
|
||||||
|
return CONFIG.excludeKeywords.dirs.some((dir) =>
|
||||||
|
normalized.includes(`/${dir}/`),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isExcludeSuffix = (filePath: string) =>
|
||||||
|
CONFIG.excludeKeywords.fileSuffixes.some((suffix) =>
|
||||||
|
filePath.endsWith(suffix),
|
||||||
|
);
|
||||||
|
|
||||||
|
const isMatchExcludePattern = (fileName: string) =>
|
||||||
|
CONFIG.excludeKeywords.filePatterns.some((pattern) => pattern.test(fileName));
|
||||||
|
|
||||||
|
function isValidFile(filePath: string): boolean {
|
||||||
|
const fileName = filePath.split(/[\\/]/).pop()!;
|
||||||
|
|
||||||
|
if (isInExcludeDir(filePath)) return false;
|
||||||
|
if (isExcludeSuffix(filePath)) return false;
|
||||||
|
if (isMatchExcludePattern(fileName)) return false;
|
||||||
|
|
||||||
|
const ext = path.extname(filePath);
|
||||||
|
return CONFIG.includeExtensions.includes(ext);
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateIndexFile(dirPath: string) {
|
||||||
|
const searchPattern = path.resolve(dirPath, "**", "*.*");
|
||||||
|
|
||||||
|
const allFiles = globSync(searchPattern, {
|
||||||
|
nodir: true,
|
||||||
|
absolute: true,
|
||||||
|
windowsPathsNoEscape: true,
|
||||||
|
dot: false,
|
||||||
|
follow: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const validFiles = allFiles.filter(isValidFile);
|
||||||
|
if (validFiles.length === 0) {
|
||||||
|
console.log("⚠️ 未找到符合条件的文件,跳过生成 index.ts");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
validFiles.sort();
|
||||||
|
|
||||||
|
const exportStatements = validFiles.map((file) => {
|
||||||
|
const relPath = path.relative(dirPath, file);
|
||||||
|
const importPath = `./${relPath
|
||||||
|
.replace(/\.[^.]+$/, "")
|
||||||
|
.replace(/\\/g, "/")}`;
|
||||||
|
return `export * from '${importPath}';`;
|
||||||
|
});
|
||||||
|
|
||||||
|
const indexContent = `
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
${exportStatements.join("\n")}
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
const indexFilePath = path.resolve(dirPath, "index.ts");
|
||||||
|
|
||||||
|
// ✅ 内容比对,避免重复写入
|
||||||
|
if (fs.existsSync(indexFilePath)) {
|
||||||
|
const old = fs.readFileSync(indexFilePath, "utf8");
|
||||||
|
if (old === indexContent) {
|
||||||
|
console.log("✅ index.ts 内容无变化,无需重新生成");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fs.writeFileSync(indexFilePath, indexContent, "utf8");
|
||||||
|
console.log(`✅ 成功生成 index.ts: ${indexFilePath}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 脚本入口
|
||||||
|
const [targetDir] = CONFIG.targetDirs;
|
||||||
|
if (!targetDir) {
|
||||||
|
console.error("❌ CONFIG.targetDirs 不能为空");
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const absTargetDir = path.resolve(process.cwd(), targetDir);
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log(`🚀 开始扫描目录: ${absTargetDir}`);
|
||||||
|
generateIndexFile(absTargetDir);
|
||||||
|
} catch (err) {
|
||||||
|
const msg = err instanceof Error ? err.message : String(err);
|
||||||
|
console.error(`❌ [gen-index-ts] 执行失败: ${msg}`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
121
templates/vite-react-app/scripts/gen-index-ts.ts
Normal file
121
templates/vite-react-app/scripts/gen-index-ts.ts
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
import fs from "fs";
|
||||||
|
import path from "path";
|
||||||
|
import { globSync } from "glob";
|
||||||
|
|
||||||
|
interface Config {
|
||||||
|
targetDirs: string[];
|
||||||
|
includeExtensions: string[];
|
||||||
|
excludeKeywords: {
|
||||||
|
dirs: string[];
|
||||||
|
fileSuffixes: string[];
|
||||||
|
filePatterns: RegExp[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const CONFIG: Config = {
|
||||||
|
targetDirs: ["src"],
|
||||||
|
includeExtensions: [".ts", ".tsx", ".vue"],
|
||||||
|
excludeKeywords: {
|
||||||
|
dirs: ["__tests__", "tests", "story", "stories", "types"],
|
||||||
|
fileSuffixes: [".d.ts"],
|
||||||
|
filePatterns: [
|
||||||
|
/^index\.(ts|tsx|js|jsx)$/,
|
||||||
|
/\.(test|spec)\./,
|
||||||
|
/\.(story|stories)\./,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizePath = (p: string) => p.replace(/\\/g, "/");
|
||||||
|
|
||||||
|
const isInExcludeDir = (filePath: string) => {
|
||||||
|
const normalized = normalizePath(filePath);
|
||||||
|
return CONFIG.excludeKeywords.dirs.some((dir) =>
|
||||||
|
normalized.includes(`/${dir}/`),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isExcludeSuffix = (filePath: string) =>
|
||||||
|
CONFIG.excludeKeywords.fileSuffixes.some((suffix) =>
|
||||||
|
filePath.endsWith(suffix),
|
||||||
|
);
|
||||||
|
|
||||||
|
const isMatchExcludePattern = (fileName: string) =>
|
||||||
|
CONFIG.excludeKeywords.filePatterns.some((pattern) => pattern.test(fileName));
|
||||||
|
|
||||||
|
function isValidFile(filePath: string): boolean {
|
||||||
|
const fileName = filePath.split(/[\\/]/).pop()!;
|
||||||
|
|
||||||
|
if (isInExcludeDir(filePath)) return false;
|
||||||
|
if (isExcludeSuffix(filePath)) return false;
|
||||||
|
if (isMatchExcludePattern(fileName)) return false;
|
||||||
|
|
||||||
|
const ext = path.extname(filePath);
|
||||||
|
return CONFIG.includeExtensions.includes(ext);
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateIndexFile(dirPath: string) {
|
||||||
|
const searchPattern = path.resolve(dirPath, "**", "*.*");
|
||||||
|
|
||||||
|
const allFiles = globSync(searchPattern, {
|
||||||
|
nodir: true,
|
||||||
|
absolute: true,
|
||||||
|
windowsPathsNoEscape: true,
|
||||||
|
dot: false,
|
||||||
|
follow: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const validFiles = allFiles.filter(isValidFile);
|
||||||
|
if (validFiles.length === 0) {
|
||||||
|
console.log("⚠️ 未找到符合条件的文件,跳过生成 index.ts");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
validFiles.sort();
|
||||||
|
|
||||||
|
const exportStatements = validFiles.map((file) => {
|
||||||
|
const relPath = path.relative(dirPath, file);
|
||||||
|
const importPath = `./${relPath
|
||||||
|
.replace(/\.[^.]+$/, "")
|
||||||
|
.replace(/\\/g, "/")}`;
|
||||||
|
return `export * from '${importPath}';`;
|
||||||
|
});
|
||||||
|
|
||||||
|
const indexContent = `
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
${exportStatements.join("\n")}
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
const indexFilePath = path.resolve(dirPath, "index.ts");
|
||||||
|
|
||||||
|
// ✅ 内容比对,避免重复写入
|
||||||
|
if (fs.existsSync(indexFilePath)) {
|
||||||
|
const old = fs.readFileSync(indexFilePath, "utf8");
|
||||||
|
if (old === indexContent) {
|
||||||
|
console.log("✅ index.ts 内容无变化,无需重新生成");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fs.writeFileSync(indexFilePath, indexContent, "utf8");
|
||||||
|
console.log(`✅ 成功生成 index.ts: ${indexFilePath}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 脚本入口
|
||||||
|
const [targetDir] = CONFIG.targetDirs;
|
||||||
|
if (!targetDir) {
|
||||||
|
console.error("❌ CONFIG.targetDirs 不能为空");
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const absTargetDir = path.resolve(process.cwd(), targetDir);
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log(`🚀 开始扫描目录: ${absTargetDir}`);
|
||||||
|
generateIndexFile(absTargetDir);
|
||||||
|
} catch (err) {
|
||||||
|
const msg = err instanceof Error ? err.message : String(err);
|
||||||
|
console.error(`❌ [gen-index-ts] 执行失败: ${msg}`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
3
templates/vite-react-app/src/App.tsx
Normal file
3
templates/vite-react-app/src/App.tsx
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export default function App() {
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
7
templates/vite-react-app/src/main.tsx
Normal file
7
templates/vite-react-app/src/main.tsx
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { createRoot } from "react-dom/client";
|
||||||
|
import App from "./App";
|
||||||
|
|
||||||
|
const container = document.getElementById("root")!;
|
||||||
|
const root = createRoot(container);
|
||||||
|
|
||||||
|
root.render(<App />);
|
||||||
4
templates/vite-react-app/src/types/css.d.ts
vendored
Normal file
4
templates/vite-react-app/src/types/css.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
declare module '*.css' {
|
||||||
|
const content: { [className: string]: string };
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
51
templates/vite-react-app/src/types/env.d.ts
vendored
Normal file
51
templates/vite-react-app/src/types/env.d.ts
vendored
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module "*.svg" {
|
||||||
|
import * as React from "react";
|
||||||
|
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "*.png" {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "*.jpg" {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "*.jpeg" {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "*.gif" {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "*.webp" {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMetaEnv {
|
||||||
|
readonly MODE: "development" | "production" | "test";
|
||||||
|
readonly BASE_URL: string;
|
||||||
|
readonly PROD: boolean;
|
||||||
|
readonly DEV: boolean;
|
||||||
|
readonly SSR: boolean;
|
||||||
|
|
||||||
|
// ===== 业务环境变量 =====
|
||||||
|
readonly VITE_API_BASE: string;
|
||||||
|
readonly VITE_UPLOAD_URL?: string;
|
||||||
|
readonly VITE_ENABLE_MOCK?: "true" | "false";
|
||||||
|
readonly VITE_SENTRY_DSN?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
readonly env: ImportMetaEnv;
|
||||||
|
}
|
||||||
26
templates/vite-react-app/tsconfig.base.json
Normal file
26
templates/vite-react-app/tsconfig.base.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
// tsconfig.base.json,用于被 tesconfig.json 和 tesconfig.build.json 继承
|
||||||
|
"compilerOptions": {
|
||||||
|
// 输出模块语法,使用版本号最新的那个,而不是实验性语法 ESNext
|
||||||
|
"module": "es2022",
|
||||||
|
|
||||||
|
// 模块解析策略,模拟 Vite / Rollup / webpack,支持 exports / imports,不强制 Node ESM 的严格规则
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
|
||||||
|
// 显式声明使用的类型包
|
||||||
|
"types": ["node", "react"],
|
||||||
|
|
||||||
|
// 允许 ESM 导入 CJS
|
||||||
|
"esModuleInterop": true,
|
||||||
|
|
||||||
|
// 跳过 node_modules 类型检查,加快构建,避免第三方类型污染
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 只做类型检查,不生成 JS 输出
|
||||||
|
* - 适用于 Vite / Next / Nuxt 等 bundler 场景
|
||||||
|
* - 防止 tsc 与构建工具重复 emit
|
||||||
|
*/
|
||||||
|
"noEmit": true
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
* - react:JSX / React 类型
|
* - react:JSX / React 类型
|
||||||
* - vite/client:import.meta / env
|
* - vite/client:import.meta / env
|
||||||
*/
|
*/
|
||||||
"types": ["node", "react", "vite/client"],
|
"types": ["node", "react"],
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* React JSX 编译模式
|
* React JSX 编译模式
|
||||||
@@ -54,21 +54,14 @@
|
|||||||
* - 适配 esbuild / SWC / bundler 编译模型
|
* - 适配 esbuild / SWC / bundler 编译模型
|
||||||
* - 禁止依赖跨文件类型推断(enum / namespace 等)
|
* - 禁止依赖跨文件类型推断(enum / namespace 等)
|
||||||
*/
|
*/
|
||||||
"isolatedModules": true,
|
"isolatedModules": true
|
||||||
|
|
||||||
/**
|
|
||||||
* 允许在 import 中显式使用 .ts / .tsx 后缀
|
|
||||||
* - 兼容 Node ESM / bundler 对文件扩展名的严格要求
|
|
||||||
* - 避免 `import './foo'` 在 TS + ESM 下歧义
|
|
||||||
*/
|
|
||||||
"allowImportingTsExtensions": true
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 参与类型检查和编译的文件
|
* 参与类型检查和编译的文件
|
||||||
* - 只扫描 src
|
* - 只扫描 src
|
||||||
* - 其它目录通过 exclude 排除
|
* - 其它目录通过 exclude 排除
|
||||||
*/
|
*/
|
||||||
"include": ["src", "scripts"],
|
"include": ["src"],
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 明确排除非源码内容
|
* 明确排除非源码内容
|
||||||
16
templates/vite-react-app/tsconfig.json
Normal file
16
templates/vite-react-app/tsconfig.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
// 此文件仅用于类型检查,不用于构建,构建时会指定使用 tsconfig.build.json
|
||||||
|
"extends": "./tsconfig.base.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
// node api 使用最新版本号的 "ESxxxx",browser api 使用 "DOM" 和 "DOM.Iterable"
|
||||||
|
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
||||||
|
|
||||||
|
//显式声明使用的类型包,避免找不到模块
|
||||||
|
"types": ["node", "react"],
|
||||||
|
|
||||||
|
// React JSX 编译模式
|
||||||
|
"jsx": "react-jsx"
|
||||||
|
},
|
||||||
|
// 将类型检查范围扩大至整个子项目,而不只是 src 文件夹,
|
||||||
|
"include": ["**/*"]
|
||||||
|
}
|
||||||
12
templates/vite-react-app/vite.config.ts
Normal file
12
templates/vite-react-app/vite.config.ts
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import dts from "vite-plugin-dts";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
react(),
|
||||||
|
dts({
|
||||||
|
insertTypesEntry: true,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
});
|
||||||
1
templates/vite-react-lib/.npmrc
Normal file
1
templates/vite-react-lib/.npmrc
Normal file
@@ -0,0 +1 @@
|
|||||||
|
registry = https://registry.npmmirror.com/
|
||||||
8
templates/vite-react-lib/.vscode/settings.json
vendored
Normal file
8
templates/vite-react-lib/.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"json.schemas": [
|
||||||
|
{
|
||||||
|
"fileMatch": ["/tsconfig.build.json", "/tsconfig.base.json"],
|
||||||
|
"schema": {}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
46
templates/vite-react-lib/package.json
Normal file
46
templates/vite-react-lib/package.json
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
{
|
||||||
|
"name": "vite-react-lib",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"sideEffects": [
|
||||||
|
"*.css"
|
||||||
|
],
|
||||||
|
"module": "./dist/index.es.js",
|
||||||
|
"main": "./dist/index.cjs.js",
|
||||||
|
"types": "./dist/index.d.ts",
|
||||||
|
"style": "./dist/index.css",
|
||||||
|
"exports": {
|
||||||
|
".": {
|
||||||
|
"import": "./dist/index.es.js",
|
||||||
|
"require": "./dist/index.cjs.js",
|
||||||
|
"types": "./dist/index.d.ts"
|
||||||
|
},
|
||||||
|
"./index.css": "./dist/index.css"
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"scripts": {
|
||||||
|
"gen-css": "ts-node scripts/gen-index-css.ts",
|
||||||
|
"gen-ts": "ts-node scripts/gen-index-ts.ts",
|
||||||
|
"gen-index": "pnpm run gen-css && pnpm run gen-ts",
|
||||||
|
"dev": "pnpm run gen-index && vite build --watch",
|
||||||
|
"build": "pnpm run gen-index && tsc -p tsconfig.build.json && vite build"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^25.6.0",
|
||||||
|
"@types/react": "^19.2.14",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "~5.2.0",
|
||||||
|
"glob": "^13.0.6",
|
||||||
|
"typescript": "~6.0.3",
|
||||||
|
"vite": "~7.3.2",
|
||||||
|
"vite-plugin-dts": "^4.5.4",
|
||||||
|
"ts-node": "^10.9.2"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^19",
|
||||||
|
"react-dom": "^19"
|
||||||
|
}
|
||||||
|
}
|
||||||
121
templates/vite-react-lib/scripts/gen-index-css.ts
Normal file
121
templates/vite-react-lib/scripts/gen-index-css.ts
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
import fs from "fs";
|
||||||
|
import path from "path";
|
||||||
|
import { globSync } from "glob";
|
||||||
|
|
||||||
|
interface Config {
|
||||||
|
targetDirs: string[];
|
||||||
|
includeExtensions: string[];
|
||||||
|
excludeKeywords: {
|
||||||
|
dirs: string[];
|
||||||
|
fileSuffixes: string[];
|
||||||
|
filePatterns: RegExp[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const CONFIG: Config = {
|
||||||
|
targetDirs: ["src"],
|
||||||
|
includeExtensions: [".ts", ".tsx", ".vue"],
|
||||||
|
excludeKeywords: {
|
||||||
|
dirs: ["__tests__", "tests", "story", "stories", "types"],
|
||||||
|
fileSuffixes: [".d.ts"],
|
||||||
|
filePatterns: [
|
||||||
|
/^index\.(ts|tsx|js|jsx)$/,
|
||||||
|
/\.(test|spec)\./,
|
||||||
|
/\.(story|stories)\./,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizePath = (p: string) => p.replace(/\\/g, "/");
|
||||||
|
|
||||||
|
const isInExcludeDir = (filePath: string) => {
|
||||||
|
const normalized = normalizePath(filePath);
|
||||||
|
return CONFIG.excludeKeywords.dirs.some((dir) =>
|
||||||
|
normalized.includes(`/${dir}/`),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isExcludeSuffix = (filePath: string) =>
|
||||||
|
CONFIG.excludeKeywords.fileSuffixes.some((suffix) =>
|
||||||
|
filePath.endsWith(suffix),
|
||||||
|
);
|
||||||
|
|
||||||
|
const isMatchExcludePattern = (fileName: string) =>
|
||||||
|
CONFIG.excludeKeywords.filePatterns.some((pattern) => pattern.test(fileName));
|
||||||
|
|
||||||
|
function isValidFile(filePath: string): boolean {
|
||||||
|
const fileName = filePath.split(/[\\/]/).pop()!;
|
||||||
|
|
||||||
|
if (isInExcludeDir(filePath)) return false;
|
||||||
|
if (isExcludeSuffix(filePath)) return false;
|
||||||
|
if (isMatchExcludePattern(fileName)) return false;
|
||||||
|
|
||||||
|
const ext = path.extname(filePath);
|
||||||
|
return CONFIG.includeExtensions.includes(ext);
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateIndexFile(dirPath: string) {
|
||||||
|
const searchPattern = path.resolve(dirPath, "**", "*.*");
|
||||||
|
|
||||||
|
const allFiles = globSync(searchPattern, {
|
||||||
|
nodir: true,
|
||||||
|
absolute: true,
|
||||||
|
windowsPathsNoEscape: true,
|
||||||
|
dot: false,
|
||||||
|
follow: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const validFiles = allFiles.filter(isValidFile);
|
||||||
|
if (validFiles.length === 0) {
|
||||||
|
console.log("⚠️ 未找到符合条件的文件,跳过生成 index.ts");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
validFiles.sort();
|
||||||
|
|
||||||
|
const exportStatements = validFiles.map((file) => {
|
||||||
|
const relPath = path.relative(dirPath, file);
|
||||||
|
const importPath = `./${relPath
|
||||||
|
.replace(/\.[^.]+$/, "")
|
||||||
|
.replace(/\\/g, "/")}`;
|
||||||
|
return `export * from '${importPath}';`;
|
||||||
|
});
|
||||||
|
|
||||||
|
const indexContent = `
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
${exportStatements.join("\n")}
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
const indexFilePath = path.resolve(dirPath, "index.ts");
|
||||||
|
|
||||||
|
// ✅ 内容比对,避免重复写入
|
||||||
|
if (fs.existsSync(indexFilePath)) {
|
||||||
|
const old = fs.readFileSync(indexFilePath, "utf8");
|
||||||
|
if (old === indexContent) {
|
||||||
|
console.log("✅ index.ts 内容无变化,无需重新生成");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fs.writeFileSync(indexFilePath, indexContent, "utf8");
|
||||||
|
console.log(`✅ 成功生成 index.ts: ${indexFilePath}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 脚本入口
|
||||||
|
const [targetDir] = CONFIG.targetDirs;
|
||||||
|
if (!targetDir) {
|
||||||
|
console.error("❌ CONFIG.targetDirs 不能为空");
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const absTargetDir = path.resolve(process.cwd(), targetDir);
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log(`🚀 开始扫描目录: ${absTargetDir}`);
|
||||||
|
generateIndexFile(absTargetDir);
|
||||||
|
} catch (err) {
|
||||||
|
const msg = err instanceof Error ? err.message : String(err);
|
||||||
|
console.error(`❌ [gen-index-ts] 执行失败: ${msg}`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
121
templates/vite-react-lib/scripts/gen-index-ts.ts
Normal file
121
templates/vite-react-lib/scripts/gen-index-ts.ts
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
import fs from "fs";
|
||||||
|
import path from "path";
|
||||||
|
import { globSync } from "glob";
|
||||||
|
|
||||||
|
interface Config {
|
||||||
|
targetDirs: string[];
|
||||||
|
includeExtensions: string[];
|
||||||
|
excludeKeywords: {
|
||||||
|
dirs: string[];
|
||||||
|
fileSuffixes: string[];
|
||||||
|
filePatterns: RegExp[];
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const CONFIG: Config = {
|
||||||
|
targetDirs: ["src"],
|
||||||
|
includeExtensions: [".ts", ".tsx", ".vue"],
|
||||||
|
excludeKeywords: {
|
||||||
|
dirs: ["__tests__", "tests", "story", "stories", "types"],
|
||||||
|
fileSuffixes: [".d.ts"],
|
||||||
|
filePatterns: [
|
||||||
|
/^index\.(ts|tsx|js|jsx)$/,
|
||||||
|
/\.(test|spec)\./,
|
||||||
|
/\.(story|stories)\./,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizePath = (p: string) => p.replace(/\\/g, "/");
|
||||||
|
|
||||||
|
const isInExcludeDir = (filePath: string) => {
|
||||||
|
const normalized = normalizePath(filePath);
|
||||||
|
return CONFIG.excludeKeywords.dirs.some((dir) =>
|
||||||
|
normalized.includes(`/${dir}/`),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isExcludeSuffix = (filePath: string) =>
|
||||||
|
CONFIG.excludeKeywords.fileSuffixes.some((suffix) =>
|
||||||
|
filePath.endsWith(suffix),
|
||||||
|
);
|
||||||
|
|
||||||
|
const isMatchExcludePattern = (fileName: string) =>
|
||||||
|
CONFIG.excludeKeywords.filePatterns.some((pattern) => pattern.test(fileName));
|
||||||
|
|
||||||
|
function isValidFile(filePath: string): boolean {
|
||||||
|
const fileName = filePath.split(/[\\/]/).pop()!;
|
||||||
|
|
||||||
|
if (isInExcludeDir(filePath)) return false;
|
||||||
|
if (isExcludeSuffix(filePath)) return false;
|
||||||
|
if (isMatchExcludePattern(fileName)) return false;
|
||||||
|
|
||||||
|
const ext = path.extname(filePath);
|
||||||
|
return CONFIG.includeExtensions.includes(ext);
|
||||||
|
}
|
||||||
|
|
||||||
|
function generateIndexFile(dirPath: string) {
|
||||||
|
const searchPattern = path.resolve(dirPath, "**", "*.*");
|
||||||
|
|
||||||
|
const allFiles = globSync(searchPattern, {
|
||||||
|
nodir: true,
|
||||||
|
absolute: true,
|
||||||
|
windowsPathsNoEscape: true,
|
||||||
|
dot: false,
|
||||||
|
follow: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const validFiles = allFiles.filter(isValidFile);
|
||||||
|
if (validFiles.length === 0) {
|
||||||
|
console.log("⚠️ 未找到符合条件的文件,跳过生成 index.ts");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
validFiles.sort();
|
||||||
|
|
||||||
|
const exportStatements = validFiles.map((file) => {
|
||||||
|
const relPath = path.relative(dirPath, file);
|
||||||
|
const importPath = `./${relPath
|
||||||
|
.replace(/\.[^.]+$/, "")
|
||||||
|
.replace(/\\/g, "/")}`;
|
||||||
|
return `export * from '${importPath}';`;
|
||||||
|
});
|
||||||
|
|
||||||
|
const indexContent = `
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
${exportStatements.join("\n")}
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
const indexFilePath = path.resolve(dirPath, "index.ts");
|
||||||
|
|
||||||
|
// ✅ 内容比对,避免重复写入
|
||||||
|
if (fs.existsSync(indexFilePath)) {
|
||||||
|
const old = fs.readFileSync(indexFilePath, "utf8");
|
||||||
|
if (old === indexContent) {
|
||||||
|
console.log("✅ index.ts 内容无变化,无需重新生成");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fs.writeFileSync(indexFilePath, indexContent, "utf8");
|
||||||
|
console.log(`✅ 成功生成 index.ts: ${indexFilePath}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 脚本入口
|
||||||
|
const [targetDir] = CONFIG.targetDirs;
|
||||||
|
if (!targetDir) {
|
||||||
|
console.error("❌ CONFIG.targetDirs 不能为空");
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
const absTargetDir = path.resolve(process.cwd(), targetDir);
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log(`🚀 开始扫描目录: ${absTargetDir}`);
|
||||||
|
generateIndexFile(absTargetDir);
|
||||||
|
} catch (err) {
|
||||||
|
const msg = err instanceof Error ? err.message : String(err);
|
||||||
|
console.error(`❌ [gen-index-ts] 执行失败: ${msg}`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
4
templates/vite-react-lib/src/types/css.d.ts
vendored
Normal file
4
templates/vite-react-lib/src/types/css.d.ts
vendored
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
declare module '*.css' {
|
||||||
|
const content: { [className: string]: string };
|
||||||
|
export default content;
|
||||||
|
}
|
||||||
51
templates/vite-react-lib/src/types/env.d.ts
vendored
Normal file
51
templates/vite-react-lib/src/types/env.d.ts
vendored
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module "*.svg" {
|
||||||
|
import * as React from "react";
|
||||||
|
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "*.png" {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "*.jpg" {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "*.jpeg" {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "*.gif" {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module "*.webp" {
|
||||||
|
const src: string;
|
||||||
|
export default src;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMetaEnv {
|
||||||
|
readonly MODE: "development" | "production" | "test";
|
||||||
|
readonly BASE_URL: string;
|
||||||
|
readonly PROD: boolean;
|
||||||
|
readonly DEV: boolean;
|
||||||
|
readonly SSR: boolean;
|
||||||
|
|
||||||
|
// ===== 业务环境变量 =====
|
||||||
|
readonly VITE_API_BASE: string;
|
||||||
|
readonly VITE_UPLOAD_URL?: string;
|
||||||
|
readonly VITE_ENABLE_MOCK?: "true" | "false";
|
||||||
|
readonly VITE_SENTRY_DSN?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMeta {
|
||||||
|
readonly env: ImportMetaEnv;
|
||||||
|
}
|
||||||
22
templates/vite-react-lib/tsconfig.base.json
Normal file
22
templates/vite-react-lib/tsconfig.base.json
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
// tsconfig.base.json,用于被 tesconfig.json 和 tesconfig.build.json 继承
|
||||||
|
"compilerOptions": {
|
||||||
|
// 输出模块语法,使用版本号最新的那个,而不是实验性语法 ESNext
|
||||||
|
"module": "es2022",
|
||||||
|
|
||||||
|
// 模块解析策略,模拟 Vite / Rollup / webpack,支持 exports / imports,不强制 Node ESM 的严格规则
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
|
||||||
|
// 显式声明使用的类型包
|
||||||
|
"types": ["node", "react"],
|
||||||
|
|
||||||
|
// 开启所有严格类型检查,防止 any / 隐式 any 扩散
|
||||||
|
"strict": true,
|
||||||
|
|
||||||
|
// 允许 ESM 导入 CJS
|
||||||
|
"esModuleInterop": true,
|
||||||
|
|
||||||
|
// 跳过 node_modules 类型检查,加快构建,避免第三方类型污染
|
||||||
|
"skipLibCheck": true
|
||||||
|
}
|
||||||
|
}
|
||||||
115
templates/vite-react-lib/tsconfig.build.json
Normal file
115
templates/vite-react-lib/tsconfig.build.json
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
{
|
||||||
|
// 此文件仅用于类型检查,不用于类型检查,构建时会指定使用 tsconfig.build.json
|
||||||
|
"extends": "./tsconfig.base.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
// Browser api,需要加 "DOM","DOM.Iterable"
|
||||||
|
// Node api,需要加 "ES2025",始终使用带版本号的最新版本
|
||||||
|
// NextJs api,属于同构,server 端会预处理 DOM,计算url,三个都需要 "ES2025", "DOM", "DOM.Iterable"
|
||||||
|
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显式声明使用的类型包
|
||||||
|
* - node:Node.js API
|
||||||
|
* - react:JSX / React 类型
|
||||||
|
* - vite/client:import.meta / env
|
||||||
|
*/
|
||||||
|
"types": ["node", "react"],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* React JSX 编译模式
|
||||||
|
* - 使用 React 17+ 新 JSX Transform
|
||||||
|
* - 不需要手动 import React
|
||||||
|
*/
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编译输出目录
|
||||||
|
* - tsc / tsc -b 都会用到
|
||||||
|
*/
|
||||||
|
"outDir": "./dist",
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 源码根目录
|
||||||
|
* - 确保 dist 结构与 src 一致
|
||||||
|
* - 对 declaration 路径至关重要
|
||||||
|
*/
|
||||||
|
"rootDir": "./src",
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生成 .d.ts 类型声明文件
|
||||||
|
* - 组件库 / npm 包发布必需
|
||||||
|
* - 对应用项目无害,仅影响类型输出
|
||||||
|
*/
|
||||||
|
"declaration": true,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 只做类型检查,不生成 JS 输出
|
||||||
|
* - 适用于 Vite / Next / Nuxt 等 bundler 场景
|
||||||
|
* - 防止 tsc 与构建工具重复 emit
|
||||||
|
*/
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 强制单文件可独立编译
|
||||||
|
* - 适配 esbuild / SWC / bundler 编译模型
|
||||||
|
* - 禁止依赖跨文件类型推断(enum / namespace 等)
|
||||||
|
*/
|
||||||
|
"isolatedModules": true
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 参与类型检查和编译的文件
|
||||||
|
* - 只扫描 src
|
||||||
|
* - 其它目录通过 exclude 排除
|
||||||
|
*/
|
||||||
|
"include": ["src"],
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 明确排除非源码内容
|
||||||
|
* - 避免污染类型系统
|
||||||
|
* - 防止误入 dist / test / config
|
||||||
|
* - 保证发布包干净
|
||||||
|
*/
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"dist",
|
||||||
|
|
||||||
|
// ---------- build / cache ----------
|
||||||
|
".turbo/**/*",
|
||||||
|
".cache/**/*",
|
||||||
|
".vite/**/*",
|
||||||
|
|
||||||
|
// ---------- 配置文件 ----------
|
||||||
|
"vite.config.ts",
|
||||||
|
"*.config.ts",
|
||||||
|
"*.config.js",
|
||||||
|
"tsconfig.*.json",
|
||||||
|
|
||||||
|
// ---------- 测试相关 ----------
|
||||||
|
"__tests__/**/*",
|
||||||
|
"test/**/*",
|
||||||
|
"tests/**/*",
|
||||||
|
"**/*.test.ts",
|
||||||
|
"**/*.test.tsx",
|
||||||
|
"**/*.spec.ts",
|
||||||
|
"**/*.spec.tsx",
|
||||||
|
|
||||||
|
// ---------- Storybook ----------
|
||||||
|
".storybook/**/*",
|
||||||
|
"stories/**/*",
|
||||||
|
|
||||||
|
// ---------- 示例 / 脚本 ----------
|
||||||
|
"example/**/*",
|
||||||
|
"examples/**/*",
|
||||||
|
"scripts/**/*",
|
||||||
|
|
||||||
|
// ---------- 环境与静态资源 ----------
|
||||||
|
".env",
|
||||||
|
".env.*",
|
||||||
|
"public/**/*",
|
||||||
|
|
||||||
|
// ---------- 文档 ----------
|
||||||
|
"docs/**/*",
|
||||||
|
"README.md",
|
||||||
|
"LICENSE"
|
||||||
|
]
|
||||||
|
}
|
||||||
16
templates/vite-react-lib/tsconfig.json
Normal file
16
templates/vite-react-lib/tsconfig.json
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
// 此文件仅用于类型检查,不用于构建,构建时会指定使用 tsconfig.build.json
|
||||||
|
"extends": "./tsconfig.base.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
// node api 使用最新版本号的 "ESxxxx",browser api 使用 "DOM" 和 "DOM.Iterable"
|
||||||
|
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
||||||
|
|
||||||
|
//显式声明使用的类型包,避免找不到模块
|
||||||
|
"types": ["node", "react"],
|
||||||
|
|
||||||
|
// React JSX 编译模式
|
||||||
|
"jsx": "react-jsx"
|
||||||
|
},
|
||||||
|
// 将类型检查范围扩大至整个子项目,而不只是 src 文件夹,
|
||||||
|
"include": ["**/*"]
|
||||||
|
}
|
||||||
@@ -2,13 +2,9 @@ import { defineConfig } from "vite";
|
|||||||
import react from "@vitejs/plugin-react";
|
import react from "@vitejs/plugin-react";
|
||||||
import dts from "vite-plugin-dts";
|
import dts from "vite-plugin-dts";
|
||||||
import path from "path";
|
import path from "path";
|
||||||
import { genIndexTsPlugin } from "./scripts-plugin/vite-plugin-gen-index-ts";
|
|
||||||
import { genIndexCssPlugin } from "./scripts-plugin/vite-plugin-gen-index-css";
|
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
genIndexTsPlugin(),
|
|
||||||
genIndexCssPlugin(),
|
|
||||||
react(),
|
react(),
|
||||||
dts({
|
dts({
|
||||||
insertTypesEntry: true,
|
insertTypesEntry: true,
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
// plugins/vite-plugin-gen-index-css.ts
|
|
||||||
import type { Plugin } from "vite";
|
|
||||||
import fs from "fs";
|
|
||||||
import path from "path";
|
|
||||||
import { globSync } from "glob";
|
|
||||||
|
|
||||||
interface Config {
|
|
||||||
targetDirs: string[];
|
|
||||||
includeExtensions: string[];
|
|
||||||
importSyntax: "@import";
|
|
||||||
importSyntaxTail?: string;
|
|
||||||
excludeFilePattern: RegExp[];
|
|
||||||
excludeDirs: string[];
|
|
||||||
warnDuplicateTailwindImport: boolean;
|
|
||||||
indexFileName: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CONFIG: Config = {
|
|
||||||
targetDirs: ["src"],
|
|
||||||
includeExtensions: [".css"],
|
|
||||||
importSyntax: "@import",
|
|
||||||
excludeFilePattern: [/index\.css/, /index\.scss/, /\.(test|spec)\./],
|
|
||||||
excludeDirs: [
|
|
||||||
"__tests__",
|
|
||||||
"tests",
|
|
||||||
"story",
|
|
||||||
"stories",
|
|
||||||
"types",
|
|
||||||
"node_modules",
|
|
||||||
"dist",
|
|
||||||
"build",
|
|
||||||
],
|
|
||||||
warnDuplicateTailwindImport: true,
|
|
||||||
indexFileName: "index.css",
|
|
||||||
};
|
|
||||||
|
|
||||||
const normalizePath = (p: string) => p.replace(/\\/g, "/");
|
|
||||||
|
|
||||||
function isValidFile(filePath: string, config: Config): boolean {
|
|
||||||
const filenameWithExt = filePath.split(/[\\/]/).pop()!;
|
|
||||||
const shouldExcludeFile = config.excludeFilePattern.some((p) =>
|
|
||||||
p.test(filenameWithExt),
|
|
||||||
);
|
|
||||||
if (shouldExcludeFile) return false;
|
|
||||||
|
|
||||||
const normalized = normalizePath(filePath);
|
|
||||||
const shouldExcludeDir = config.excludeDirs.some((dir) =>
|
|
||||||
normalized.includes(`/${dir}/`),
|
|
||||||
);
|
|
||||||
if (shouldExcludeDir) return false;
|
|
||||||
|
|
||||||
const ext = path.extname(filePath);
|
|
||||||
if (!config.includeExtensions.includes(ext)) return false;
|
|
||||||
|
|
||||||
if (config.warnDuplicateTailwindImport) {
|
|
||||||
try {
|
|
||||||
const content = fs.readFileSync(filePath, "utf-8");
|
|
||||||
if (
|
|
||||||
content.includes('@import "tailwindcss"') ||
|
|
||||||
content.includes("@import 'tailwindcss'")
|
|
||||||
) {
|
|
||||||
console.warn(
|
|
||||||
`[gen-index-css] ${filePath} 含有重复的 @import "tailwindcss",建议删除`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateIndexFile(config: Config) {
|
|
||||||
const [targetDir] = config.targetDirs;
|
|
||||||
const dirPath = path.resolve(process.cwd(), targetDir);
|
|
||||||
|
|
||||||
const searchPattern = path.resolve(dirPath, "**", "*.*");
|
|
||||||
|
|
||||||
const allFiles = globSync(searchPattern, {
|
|
||||||
nodir: true,
|
|
||||||
absolute: true,
|
|
||||||
windowsPathsNoEscape: true,
|
|
||||||
dot: false,
|
|
||||||
follow: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
const validFiles = allFiles.filter((f) => isValidFile(f, config));
|
|
||||||
|
|
||||||
console.log(`✅ 有效 CSS 文件数量: ${validFiles.length}`);
|
|
||||||
validFiles.sort();
|
|
||||||
|
|
||||||
const importStatements = validFiles.map((file) => {
|
|
||||||
const relPath = path.relative(dirPath, file);
|
|
||||||
const importPath = "./" + relPath.replace(/\\/g, "/");
|
|
||||||
return `${config.importSyntax} '${importPath}';`;
|
|
||||||
});
|
|
||||||
|
|
||||||
const indexContent = `
|
|
||||||
@import "tailwindcss";
|
|
||||||
${importStatements.join("\n")}
|
|
||||||
`.trim();
|
|
||||||
|
|
||||||
const indexFilePath = path.resolve(dirPath, config.indexFileName);
|
|
||||||
|
|
||||||
// ✅ 内容比对,防止无限 rebuild
|
|
||||||
if (fs.existsSync(indexFilePath)) {
|
|
||||||
const old = fs.readFileSync(indexFilePath, "utf8");
|
|
||||||
if (old === indexContent) return;
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.writeFileSync(indexFilePath, indexContent, "utf8");
|
|
||||||
console.log(`✅ 成功生成 ${config.indexFileName}: ${indexFilePath}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function genIndexCssPlugin(): Plugin {
|
|
||||||
return {
|
|
||||||
name: "vite-plugin-gen-index-css",
|
|
||||||
apply: "build",
|
|
||||||
|
|
||||||
buildStart() {
|
|
||||||
try {
|
|
||||||
generateIndexFile(CONFIG);
|
|
||||||
} catch (err) {
|
|
||||||
const msg = err instanceof Error ? err.message : String(err);
|
|
||||||
this.error(`[gen-index-css] failed: ${msg}`);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
handleHotUpdate({ file }) {
|
|
||||||
if (normalizePath(file).endsWith(`/src/${CONFIG.indexFileName}`)) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
{
|
|
||||||
// tsconfig.base.json,用于被 tesconfig.json 和 tesconfig.build.json 继承
|
|
||||||
"compilerOptions": {
|
|
||||||
// 输出模块语法,使用版本号最新的那个,而不是实验性语法 ESNext
|
|
||||||
"module": "es2022",
|
|
||||||
|
|
||||||
// 模块解析策略,模拟 Vite / Rollup / webpack,支持 exports / imports,不强制 Node ESM 的严格规则
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
|
|
||||||
// 显式声明使用的类型包
|
|
||||||
"types": ["node", "react", "vite/client"],
|
|
||||||
|
|
||||||
// 开启所有严格类型检查,防止 any / 隐式 any 扩散
|
|
||||||
"strict": true,
|
|
||||||
|
|
||||||
// 允许 ESM 导入 CJS
|
|
||||||
"esModuleInterop": true,
|
|
||||||
|
|
||||||
// 跳过 node_modules 类型检查,加快构建,避免第三方类型污染
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
// 模块检测策略,不会影响 node_modules 中的第三方 CommonJS 依赖,Vite 会在预构建阶段自动将其转换为 ESM。
|
|
||||||
"moduleDetection": "force",
|
|
||||||
|
|
||||||
// 保留源码中的 import / export 语句原样输出,不进行自动转换(如 import → require),通常与 moduleDetection: "force" 搭配使用
|
|
||||||
"verbatimModuleSyntax": true,
|
|
||||||
|
|
||||||
// 是否检查“未使用的局部变量”
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
|
|
||||||
// 是否检查“未使用的函数参数”
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
|
|
||||||
// 是否只允许“可擦除的语法(Erasable Syntax),确保 TypeScript 语法在编译后可完全移除
|
|
||||||
"erasableSyntaxOnly": true,
|
|
||||||
|
|
||||||
// 是否禁止 switch 语句中的 case 贯穿(fallthrough),如果 case 没有 break / return,会报错
|
|
||||||
"noFallthroughCasesInSwitch": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user