xi-create 1.0.0

package/README.md

@@ -0,0 +1,120 @@
+# xi-create
+
+一个简单易用的命令行工具，用于基于模板快速创建新项目，支持交互式与「项目名 + 模板」一行创建。
+
+---
+
+## 特性
+
+- 支持多模板选择
+- 支持交互式与一行命令创建
+- 支持 `--template` / `-t` 指定模板
+- 自动处理 package.json、.gitignore 等
+
+---
+
+## 安装
+
+### 全局安装
+
+```bash
+npm install -g xi-create
+# 或
+pnpm add -g xi-create
+```
+
+### 临时使用（推荐）
+
+```bash
+npx xi-create@latest
+# 或
+pnpm dlx xi-create
+```
+
+---
+
+## 使用方法
+
+### 1. 交互式创建
+
+不加参数时进入交互（选择模板、输入项目名）：
+
+```bash
+xi-create
+# 或
+npx xi-create@latest
+```
+
+### 2. 一行命令快速创建
+
+默认子命令为 `create`，可直接写项目名与模板（模板短名为 `template-` 后的部分，如 `react-ts`）：
+
+```bash
+xi-create my-app -t react-ts
+# 或
+xi-create my-app --template react-ts
+```
+
+显式写出子命令时等价：
+
+```bash
+xi-create create my-app --template react-ts
+```
+
+### 3. 只指定部分参数
+
+只给项目名时会提示选择模板；只给模板时会提示输入项目名（通过 `-t` / `--template`）：
+
+```bash
+xi-create my-app
+xi-create -t react-ts
+```
+
+### 4. 查看所有可用模板
+
+```bash
+xi-create list
+```
+
+---
+
+## 关于 `npm create`
+
+npm 的 `npm create <name>` 会执行 **`create-<name>`** 这个包（例如 `npm create vite` 对应 `create-vite`）。若要通过 `npm create xi-create` 使用本工具，需要单独发布 **`create-xi-create`** 包并在其中转发到 `xi-create`；当前仓库仅提供 **`xi-create`**，请优先使用 **`npx xi-create`** / **`pnpm dlx xi-create`** 或全局安装后的 **`xi-create`**。
+
+使用 `npx` / `pnpm dlx` 时，模板参数直接跟在项目名后面即可，**不要**在项目名与 `--template` 之间插入单独的 `--`。中间的 `--` 会原样传给本工具，Commander 会报 `too many arguments`（与本地用 `node` 执行时相同）：
+
+```bash
+npx xi-create@latest my-app --template react-ts
+# 或
+pnpm dlx xi-create my-app -t react-ts
+```
+
+```bash
+node ./bin/xi-create.js my-app --template react-ts
+```
+
+---
+
+## 扩展模板
+
+1. 在 `templates` 目录下添加新的模板文件夹，命名格式为 `template-xxx`，如：
+   - `template-react-ts`
+   - `template-vue`
+2. 每个模板文件夹下建议包含自己的 `package.json`、`_gitignore` 等。
+3. 工具会自动识别并展示所有模板。
+
+---
+
+## 开发调试
+
+```bash
+pnpm install
+pnpm start
+```
+
+---
+
+## License
+
+ISC

package/bin/xi-create.js

@@ -0,0 +1,189 @@
+#!/usr/bin/env node
+
+import { program } from 'commander';
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+import fs from 'fs-extra';
+import path from 'path';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import ora from 'ora';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const pkgJsonPath = path.join(__dirname, '..', 'package.json');
+const pkg = JSON.parse(readFileSync(pkgJsonPath, 'utf8'));
+
+function getTemplates() {
+  const templatesDir = path.join(__dirname, '..', 'templates');
+  if (!fs.existsSync(templatesDir)) {
+    return [];
+  }
+
+  const templates = fs
+    .readdirSync(templatesDir, { withFileTypes: true })
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name)
+    .filter((name) => name.startsWith('template-'));
+
+  return templates.map((name) => ({
+    name: name.replace('template-', ''),
+    value: name,
+    path: path.join(templatesDir, name),
+  }));
+}
+
+async function copyTemplate(templatePath, targetPath, projectName) {
+  const spinner = ora('正在创建项目...').start();
+
+  try {
+    await fs.copy(templatePath, targetPath);
+
+    const packageJsonPath = path.join(targetPath, 'package.json');
+    if (await fs.pathExists(packageJsonPath)) {
+      const packageJson = await fs.readJson(packageJsonPath);
+      packageJson.name = projectName;
+      await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
+    }
+
+    const gitignorePath = path.join(targetPath, '_gitignore');
+    if (await fs.pathExists(gitignorePath)) {
+      await fs.move(gitignorePath, path.join(targetPath, '.gitignore'));
+    }
+
+    const nodeModulesPath = path.join(targetPath, 'node_modules');
+    if (await fs.pathExists(nodeModulesPath)) {
+      await fs.remove(nodeModulesPath);
+    }
+
+    spinner.succeed('项目创建成功！');
+
+    console.log(chalk.green('\n🎉 项目已创建完成！'));
+    console.log(chalk.cyan(`\n📁 项目路径: ${targetPath}`));
+    console.log(chalk.yellow('\n📋 下一步操作:'));
+    console.log(chalk.white(`  cd ${projectName}`));
+    console.log(chalk.white('  pnpm install'));
+    console.log(chalk.white('  pnpm dev'));
+  } catch (error) {
+    spinner.fail('项目创建失败！');
+    console.error(chalk.red('错误信息:'), error.message);
+    process.exit(1);
+  }
+}
+
+async function runCreate({ projectName, template } = {}) {
+  const templates = getTemplates();
+  if (templates.length === 0) {
+    console.log(chalk.red('❌ 没有找到可用的模板！'));
+    console.log(chalk.yellow('请确保 templates 目录下有模板文件夹。'));
+    process.exit(1);
+  }
+
+  const finalName = projectName?.trim() || undefined;
+  const finalTemplate = template?.trim() || undefined;
+
+  if (finalName && finalTemplate) {
+    const tpl = templates.find(
+      (t) => t.name === finalTemplate || t.value === finalTemplate
+    );
+    if (!tpl) {
+      console.log(chalk.red(`❌ 未找到模板: ${finalTemplate}`));
+      process.exit(1);
+    }
+    if (fs.existsSync(finalName)) {
+      console.log(chalk.red('❌ 项目目录已存在，请选择其他名称！'));
+      process.exit(1);
+    }
+    await copyTemplate(
+      tpl.path,
+      path.join(process.cwd(), finalName),
+      finalName
+    );
+    return;
+  }
+
+  const questions = [];
+  if (!finalTemplate) {
+    questions.push({
+      type: 'list',
+      name: 'template',
+      message: '请选择项目模板:',
+      choices: templates.map((t) => ({
+        name: `${t.name} (${t.value})`,
+        value: t.value,
+      })),
+    });
+  }
+  if (!finalName) {
+    questions.push({
+      type: 'input',
+      name: 'projectName',
+      message: '请输入项目名称:',
+      validate: (input) => {
+        if (!input.trim()) {
+          return '项目名称不能为空！';
+        }
+        if (fs.existsSync(input)) {
+          return '项目目录已存在，请选择其他名称！';
+        }
+        return true;
+      },
+    });
+  }
+
+  try {
+    const answers = questions.length > 0 ? await inquirer.prompt(questions) : {};
+    const resolvedName = finalName || answers.projectName;
+    const resolvedTemplate = finalTemplate || answers.template;
+    const tpl = templates.find(
+      (t) => t.name === resolvedTemplate || t.value === resolvedTemplate
+    );
+    if (!tpl) {
+      console.log(chalk.red(`❌ 未找到模板: ${resolvedTemplate}`));
+      process.exit(1);
+    }
+    await copyTemplate(
+      tpl.path,
+      path.join(process.cwd(), resolvedName),
+      resolvedName
+    );
+  } catch (error) {
+    console.error(chalk.red('创建项目时发生错误:'), error.message);
+    process.exit(1);
+  }
+}
+
+program.name('xi-create').description('一个用于创建项目的命令行工具').version(pkg.version);
+
+program
+  .command('list')
+  .description('列出所有可用模板')
+  .action(() => {
+    const templates = getTemplates();
+    if (templates.length === 0) {
+      console.log(chalk.yellow('没有找到可用的模板。'));
+    } else {
+      console.log(chalk.green('可用的模板:'));
+      templates.forEach((t) => {
+        console.log(chalk.cyan(`  - ${t.name}`));
+      });
+    }
+  });
+
+program
+  .command('create [projectName]', { isDefault: true })
+  .description('创建新项目')
+  .option('-t, --template <name>', '模板短名（如 react-ts）或完整目录名（如 template-react-ts）')
+  .action(async (projectName, options) => {
+    await runCreate({ projectName, template: options.template });
+  });
+
+if (process.argv.length === 2) {
+  runCreate({}).catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+} else {
+  program.parse();
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "xi-create",
+  "version": "1.0.0",
+  "description": "一个用于创建项目的命令行工具",
+  "type": "module",
+  "main": "./bin/xi-create.js",
+  "bin": {
+    "xi-create": "bin/xi-create.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node ./bin/xi-create.js"
+  },
+  "keywords": [
+    "cli",
+    "scaffold",
+    "template",
+    "create"
+  ],
+  "author": "",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/The-End-Hero/xi-create.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "chalk": "^5.6.2",
+    "commander": "^14.0.3",
+    "fs-extra": "^11.3.4",
+    "inquirer": "^13.3.2",
+    "ora": "^9.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.12.0"
+  }
+}

package/templates/template-react-ts/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/templates/template-react-ts/_gitignore

@@ -0,0 +1,41 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+dist-zip
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.cursor
+.claude
+.gpt_engineer
+.aider
+.codeium
+.tabnine
+.continue
+.v0
+.bolt
+.lovable
+.grain
+.coderabbit
+.replit
+.stackblitz
+.qodeer

package/templates/template-react-ts/eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/templates/template-react-ts/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/template-react-ts/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "vite-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint ",
+    "preview": "vite preview",
+    "preinstall": "npx only-allow pnpm"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "@xiping/react-components": "^1.0.70",
+    "@zumer/snapdom": "^2.7.0",
+    "ahooks": "^3.9.7",
+    "axios": "^1.14.0",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.20",
+    "disable-devtool": "^0.3.9",
+    "file-saver": "^2.0.5",
+    "lodash-es": "^4.18.1",
+    "lucide-react": "^1.7.0",
+    "motion": "^12.38.0",
+    "react": "^19.2.4",
+    "react-device-detect": "^2.2.3",
+    "react-dom": "^19.2.4",
+    "react-dropzone": "^15.0.0",
+    "react-hot-toast": "^2.6.0",
+    "react-router-dom": "^7.13.2",
+    "zustand": "^5.0.12"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/file-saver": "^2.0.7",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@xiping/vite-version": "^1.0.71",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "less": "^4.6.4",
+    "only-allow": "^1.2.2",
+    "postcss": "^8.5.8",
+    "prettier": "^3.8.1",
+    "sharp": "^0.34.5",
+    "svgo": "^4.0.1",
+    "tailwind-scrollbar": "^4.0.2",
+    "tailwindcss": "^4.2.2",
+    "tailwindcss-safe-area": "^1.3.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.58.0",
+    "vite": "^8.0.3",
+    "vite-plugin-image-optimizer": "^2.0.3",
+    "vite-plugin-pwa": "^1.2.0",
+    "vite-plugin-zip-pack": "^1.2.4"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

package/templates/template-react-ts/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/template-react-ts/src/App.tsx

@@ -0,0 +1,29 @@
+import { HashRouter, Route, Routes, useLocation } from "react-router-dom";
+import Home from "@/pages/home/Home.tsx";
+import "./App.css";
+import Login from "@/pages/login/Login.tsx";
+import { AnimatePresence } from "motion/react";
+
+function App() {
+  return (
+    <HashRouter>
+      <AppContent />
+    </HashRouter>
+  );
+}
+
+// Separate component to use hooks inside HashRouter
+function AppContent() {
+  const location = useLocation();
+  
+  return (
+    <AnimatePresence mode="wait">
+      <Routes location={location} key={location.pathname}>
+        <Route path="/" element={<Home />} />
+        <Route path="/login" element={<Login />} />
+      </Routes>
+    </AnimatePresence>
+  );
+}
+
+export default App;

package/templates/template-react-ts/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/template-react-ts/src/main.tsx

@@ -0,0 +1,11 @@
+// import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  // <StrictMode>
+  <App />,
+  // </StrictMode>,
+);

package/templates/template-react-ts/src/pages/home/Home.tsx

@@ -0,0 +1,24 @@
+import { Link } from "react-router-dom";
+import { motion } from "motion/react";
+
+const Home = () => {
+  return (
+    <motion.div
+      className="w-screen h-screen bg-blue-600 flex flex-col items-center justify-center text-white"
+      initial={{ opacity: 0, filter: "blur(8px)" }}
+      animate={{ opacity: 1, filter: "blur(0px)" }}
+      exit={{ opacity: 0, filter: "blur(8px)" }}
+      transition={{ duration: 0.3 }}
+    >
+      <h1 className="text-4xl font-bold mb-4">Home Page</h1>
+      <Link
+        to="/login"
+        className="px-4 py-2 bg-white text-blue-600 rounded-md hover:bg-gray-100 transition-colors"
+      >
+        Go to Login
+      </Link>
+    </motion.div>
+  );
+};
+
+export default Home;

package/templates/template-react-ts/src/pages/login/Login.tsx

@@ -0,0 +1,24 @@
+import { Link } from "react-router-dom";
+import { motion } from "motion/react";
+
+const Login = () => {
+  return (
+    <motion.div
+      className="w-screen h-screen bg-amber-400 flex flex-col items-center justify-center text-white"
+      initial={{ opacity: 0, filter: "blur(8px)" }}
+      animate={{ opacity: 1, filter: "blur(0px)" }}
+      exit={{ opacity: 0, filter: "blur(8px)" }}
+      transition={{ duration: 0.3 }}
+    >
+      <h1 className="text-4xl font-bold mb-4">Login Page</h1>
+      <Link
+        to="/"
+        className="px-4 py-2 bg-white text-amber-700 rounded-md hover:bg-gray-100 transition-colors"
+      >
+        Back to Home
+      </Link>
+    </motion.div>
+  );
+};
+
+export default Login;

package/templates/template-react-ts/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/template-react-ts/tsconfig.app.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    // alias
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/templates/template-react-ts/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/templates/template-react-ts/tsconfig.node.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": [
+      "ES2023",
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}

package/templates/template-react-ts/vite.config.ts

@@ -0,0 +1,99 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import zipPack from "vite-plugin-zip-pack";
+import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
+import path from "path";
+import { viteVersionPlugin } from "@xiping/vite-version";
+import packageJSON from "./package.json";
+import { VitePWA } from "vite-plugin-pwa";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig(({ mode }) => {
+  console.log(mode);
+  return {
+    plugins: [
+      tailwindcss(),
+      react(),
+      VitePWA({
+        registerType: "autoUpdate",
+        devOptions: { enabled: false },
+        workbox: {
+          maximumFileSizeToCacheInBytes: 10 * 1024 * 1024, // 10MB
+          clientsClaim: true,
+          skipWaiting: true,
+          runtimeCaching: [
+            {
+              urlPattern: /^https:\/\/.*\/.*/i,
+              handler: "NetworkFirst",
+              options: {
+                cacheName: "api-cache",
+                networkTimeoutSeconds: 10,
+                expiration: {
+                  maxEntries: 100,
+                  maxAgeSeconds: 24 * 60 * 60, // 24 hours
+                },
+                cacheableResponse: {
+                  statuses: [0, 200],
+                },
+              },
+            },
+            {
+              urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
+              handler: "CacheFirst",
+              options: {
+                cacheName: "images",
+                expiration: {
+                  maxEntries: 60,
+                  maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
+                },
+              },
+            },
+          ],
+        },
+        manifest: {
+          name: packageJSON.name,
+          short_name: packageJSON.name,
+          theme_color: "#ffffff",
+          icons: [
+            {
+              src: "pwa-192x192.png",
+              sizes: "192x192",
+              type: "image/png",
+            },
+            {
+              src: "pwa-512x512.png",
+              sizes: "512x512",
+              type: "image/png",
+            },
+          ],
+        },
+      }),
+      ViteImageOptimizer({
+        /* pass your config */
+        png: {
+          quality: 80,
+        },
+        jpg: {
+          quality: 80,
+        },
+        jpeg: {
+          quality: 80,
+        },
+        webp: {
+          quality: 80,
+        },
+      }),
+      viteVersionPlugin({ filename: "version.txt" }),
+      zipPack({
+        outDir: "dist-zip",
+        outFileName: `${packageJSON.name}-${mode}.zip`,
+      }),
+    ],
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "src"),
+      },
+    },
+  };
+});