Skip to content

穆春红 / frontend-hub

Go to a project
Commit 35cd3d68 by chunhong.mu
Options

chore(root): update scripts

parent c3a40413
Expand all
Inline Side-by-side
Showing with 308 additions and 33 deletions
ARCHITECTURE.md
......@@ -31,7 +31,39 @@ common-web/
### `scripts/` — 辅助脚本
存放项目辅助脚本（如项目选择器、自动化脚本等），不参与代码检查（已在 `eslint.config.mjs` 中忽略）。
存放项目辅助脚本，不参与代码检查（已在 `eslint.config.mjs` 中忽略）。
**脚本列表**：
| 脚本 | 说明 |
|------|------|
| `dev-project.ts` | 启动指定项目的开发服务器 |
| `build-project.ts` | 构建指定项目 |
| `git-workflow.ts` | Git 工作流自动化脚本 |
| `new-project.ts` | 一键创建新项目 |
**使用方式**：
```bash
# 启动项目开发服务器
pnpm dev:project --project=official-site-web
# 构建指定项目
pnpm build:project --project=official-site-web
# 创建新项目
pnpm new:project admin-web vue
# Git 工作流
pnpm git:dev-start official-site-web # 创建/切换到项目开发分支
pnpm git:dev-done official-site-web # 合并项目分支到 dev
pnpm git:deploy-staging # 部署到预发环境
pnpm git:deploy-release v1.0.0 # 部署到生产环境
pnpm git:hotfix-start # 创建/切换到 hotfix 分支
pnpm git:hotfix-done # 完成 hotfix
pnpm git:refactor-start # 创建/切换到 refactor 分支
pnpm git:refactor-done # 完成 refactor
```
---
......@@ -426,32 +458,32 @@ refactor ← 重构分支（唯一）
### 6.4 工作流脚本
项目提供 `scripts/git-workflow.js` 脚本，可通过 npm scripts 执行：
项目提供 `scripts/git-workflow.ts` 脚本，可通过 npm scripts 执行：
```bash
# 创建项目开发分支
pnpm git:feature official-site-web
# 创建/切换到项目开发分支
pnpm git:dev-start official-site-web
# 合并项目分支到 dev
pnpm git:merge official-site-web
pnpm git:dev-done official-site-web
# 发布预发（dev → staging）
pnpm git:release
pnpm git:deploy-staging
# 发布生产（staging → release）
pnpm git:publish
pnpm git:deploy-release v1.0.0
# 创建 hotfix 分支
pnpm git:hotfix
# 创建/切换到 hotfix 分支
pnpm git:hotfix-start
# 合并 hotfix 到 release 和 dev
pnpm git:hotfix:merge
# 完成 hotfix，合并到 release 和 dev
pnpm git:hotfix-done
# 创建 refactor 分支
pnpm git:refactor
# 创建/切换到 refactor 分支
pnpm git:refactor-start
# 合并 refactor 到 dev
pnpm git:refactor:merge
# 完成 refactor，合并到 dev
pnpm git:refactor-done
```
### 6.5 工作流说明
......@@ -459,39 +491,39 @@ pnpm git:refactor:merge
**1. 新功能开发**：
```bash
pnpm git:feature official-site-web
pnpm git:dev-start official-site-web
# 日常开发直接在 dev/official-site-web 提交
# 小 bug 也直接在此分支修复
pnpm git:merge official-site-web # 合并回 dev
pnpm git:dev-done official-site-web # 合并回 dev
```
**2. 发布预发**：
```bash
pnpm git:release # dev → staging
pnpm git:deploy-staging # dev → staging
```
**3. 发布生产**：
```bash
pnpm git:publish # staging → release，自动打 tag
pnpm git:deploy-release v1.0.0 # staging → release，自动打 tag
```
**4. 紧急修复**：
```bash
pnpm git:hotfix # 创建/切换到 hotfix 分支
pnpm git:hotfix-start # 创建/切换到 hotfix 分支
# 修复...
pnpm git:hotfix:merge # 合并到 release 和 dev
pnpm git:hotfix-done # 合并到 release 和 dev
```
**5. 重构**：
```bash
pnpm git:refactor # 创建/切换到 refactor 分支
pnpm git:refactor-start # 创建/切换到 refactor 分支
# 重构...
pnpm git:refactor:merge # 合并到 dev
pnpm git:refactor-done # 合并到 dev
```
### 6.6 提交规范
......
package.json
......@@ -5,19 +5,20 @@
"private": true,
"packageManager": "pnpm@9.12.3",
"scripts": {
"dev:project": "tsx scripts/dev.ts",
"build:project": "tsx scripts/build.ts",
"dev:project": "tsx scripts/dev-project.ts",
"build:project": "tsx scripts/build-project.ts",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"prepare": "husky",
"git:feature": "tsx scripts/git-workflow.ts feature",
"git:merge": "tsx scripts/git-workflow.ts merge",
"git:release": "tsx scripts/git-workflow.ts release",
"git:publish": "tsx scripts/git-workflow.ts publish",
"git:hotfix": "tsx scripts/git-workflow.ts hotfix",
"git:hotfix:merge": "tsx scripts/git-workflow.ts hotfix:merge",
"git:refactor": "tsx scripts/git-workflow.ts refactor",
"git:refactor:merge": "tsx scripts/git-workflow.ts refactor:merge"
"git:dev-start": "tsx scripts/git-workflow.ts dev-start",
"git:dev-done": "tsx scripts/git-workflow.ts dev-done",
"git:deploy-staging": "tsx scripts/git-workflow.ts deploy-staging",
"git:deploy-release": "tsx scripts/git-workflow.ts deploy-release",
"git:hotfix-start": "tsx scripts/git-workflow.ts hotfix-start",
"git:hotfix-done": "tsx scripts/git-workflow.ts hotfix-done",
"git:refactor-start": "tsx scripts/git-workflow.ts refactor-start",
"git:refactor-done": "tsx scripts/git-workflow.ts refactor-done",
"new:project": "tsx scripts/new-project.ts"
},
"devDependencies": {
"@antfu/eslint-config": "^3.9.2",
......
scripts/new-project.ts 0 → 100644
import { execSync } from 'node:child_process'
import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
import { resolve } from 'node:path'
/** 获取命令行参数 */
const projectName = process.argv[2]
const projectType = process.argv[3] || 'nuxt'
/** 校验参数 */
if (!projectName)
{
console.error('Usage: pnpm new:project <project-name> [nuxt|vue]')
console.error('Example: pnpm new:project admin-web vue')
process.exit(1)
}
const projectDir = resolve('packages', projectName)
/** 检查项目是否已存在 */
if (existsSync(projectDir))
{
console.error(`Error: Project "${projectName}" already exists at ${projectDir}`)
process.exit(1)
}
console.log(`Creating project: ${projectName} (type: ${projectType})`)
/**
* 步骤 1：创建目录结构
* 根据项目类型创建不同的目录
*/
const dirs = [
'pages',
'components/business',
'components/layout',
'composables',
'api',
'services',
'stores',
'utils',
'config',
'types',
'assets',
]
if (projectType === 'vue')
{
dirs.push('router')
}
else
{
dirs.push('middleware')
dirs.push('plugins')
}
for (const dir of dirs)
{
mkdirSync(resolve(projectDir, dir), { recursive: true })
}
/**
* 步骤 2：创建 package.json
* 根据项目类型配置不同的依赖和脚本
*/
const packageJson = {
name: projectName,
type: 'module',
version: '1.0.0',
private: true,
scripts: projectType === 'nuxt'
? {
dev: 'nuxt dev',
build: 'nuxt build',
generate: 'nuxt generate',
preview: 'nuxt preview',
}
: {
dev: 'vite',
build: 'vue-tsc && vite build',
preview: 'vite preview',
},
dependencies: projectType === 'nuxt'
? {
nuxt: '^3.14.1',
vue: '^3.4.0',
'ant-design-vue': '^4.2.6',
axios: '^1.7.9',
pinia: '^2.1.7',
}
: {
vue: '^3.4.0',
'ant-design-vue': '^4.2.6',
axios: '^1.7.9',
pinia: '^2.1.7',
'vue-router': '^4.3.0',
},
devDependencies: projectType === 'nuxt'
? {
typescript: '^5.6.3',
unocss: '^0.58.0',
}
: {
typescript: '^5.6.3',
'vue-tsc': '^2.1.0',
vite: '^5.4.0',
'@vitejs/plugin-vue': '^5.1.0',
unocss: '^0.58.0',
},
}
writeFileSync(
resolve(projectDir, 'package.json'),
`${JSON.stringify(packageJson, null, 4)}\n`,
)
/**
* 步骤 3：创建 tsconfig.json
*/
const tsconfig = {
compilerOptions: {
target: 'ESNext',
module: 'ESNext',
moduleResolution: 'bundler',
strict: true,
jsx: 'preserve',
resolveJsonModule: true,
isolatedModules: true,
esModuleInterop: true,
lib: ['ESNext', 'DOM'],
skipLibCheck: true,
paths: {
'@/*': ['./*'],
},
},
include: ['**/*.ts', '**/*.vue'],
exclude: ['node_modules', 'dist'],
}
writeFileSync(
resolve(projectDir, 'tsconfig.json'),
`${JSON.stringify(tsconfig, null, 4)}\n`,
)
/**
* 步骤 4：创建环境文件
* 包含 dev、test、staging、production 四种环境
*/
const envFiles = {
'.env.development': 'APP_ENV=dev\nNODE_ENV=development\n',
'.env.test': 'APP_ENV=test\nNODE_ENV=production\n',
'.env.staging': 'APP_ENV=staging\nNODE_ENV=production\n',
'.env.production': 'APP_ENV=production\nNODE_ENV=production\n',
}
for (const [file, content] of Object.entries(envFiles))
{
writeFileSync(resolve(projectDir, file), content)
}
/**
* 步骤 5：创建入口文件
* Nuxt 项目创建 app.vue 和 nuxt.config.ts
* Vue 项目创建 src/App.vue、src/main.ts 和 vite.config.ts
*/
if (projectType === 'nuxt')
{
writeFileSync(
resolve(projectDir, 'app.vue'),
`<template>\n <div>\n <NuxtPage />\n </div>\n</template>\n`,
)
writeFileSync(
resolve(projectDir, 'nuxt.config.ts'),
`export default defineNuxtConfig({\n devtools: { enabled: true },\n modules: ['@unocss/nuxt'],\n})\n`,
)
}
else
{
mkdirSync(resolve(projectDir, 'src'), { recursive: true })
writeFileSync(
resolve(projectDir, 'src/App.vue'),
`<template>\n <div>\n <RouterView />\n </div>\n</template>\n`,
)
writeFileSync(
resolve(projectDir, 'src/main.ts'),
`import { createApp } from 'vue'\nimport { createPinia } from 'pinia'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(createPinia())\napp.mount('#app')\n`,
)
writeFileSync(
resolve(projectDir, 'vite.config.ts'),
`import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport UnoCSS from 'unocss/vite'\n\nexport default defineConfig({\n plugins: [vue(), UnoCSS()],\n})\n`,
)
}
/**
* 步骤 6：创建 index.ts 占位文件
*/
const indexFiles = [
'api/index.ts',
'api/request.ts',
'composables/index.ts',
'config/index.ts',
'services/index.ts',
'stores/index.ts',
'types/index.ts',
'utils/index.ts',
]
for (const file of indexFiles)
{
writeFileSync(resolve(projectDir, file), 'export {}\n')
}
/**
* 步骤 7：创建首页
*/
writeFileSync(
resolve(projectDir, 'pages/index.vue'),
`<template>\n <div>\n <h1>${projectName}</h1>\n </div>\n</template>\n\n<script setup lang="ts">\n//\n</script>\n`,
)
/**
* 步骤 8：安装依赖
*/
console.log('Installing dependencies...')
execSync('pnpm install', { stdio: 'inherit' })
/**
* 步骤 9：创建并切换到项目开发分支
* 从 dev 分支创建 dev/项目名 分支
*/
console.log('Creating dev branch...')
execSync('git checkout dev', { stdio: 'inherit' })
execSync(`git checkout -b dev/${projectName}`, { stdio: 'inherit' })
console.log(`Switched to dev/${projectName}`)
console.log(`\nProject "${projectName}" created successfully!`)
console.log(`\nNext steps:`)
console.log(` 1. Start developing in packages/${projectName}`)
console.log(` 2. pnpm dev:project --project=${projectName}`)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment