npm - nsbp-cli - Versions diffs - 0.2.27 → 0.2.30 - Mend

nsbp-cli 0.2.27 → 0.2.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/README.md +1 -1
package/bin/nsbp.js +97 -74
package/package.json +1 -1
package/templates/basic/.husky/README.md +47 -0
package/templates/basic/.husky/commit-msg +17 -0
package/templates/basic/.husky/pre-commit +4 -0
package/templates/basic/.husky/pre-push +4 -0
package/templates/basic/.prettierrc.js +13 -0
package/templates/basic/README.md +43 -0
package/templates/basic/docs/DEVELOPMENT_GUIDE.md +290 -0
package/templates/basic/docs/ESLINT_AND_PRETTIER.md +184 -0
package/templates/basic/docs/HUSKY_9_UPGRADE.md +76 -0
package/templates/basic/docs/HUSKY_ESLINT_SETUP.md +293 -0
package/templates/basic/docs/SETUP_GIT_HOOKS.md +106 -0
package/templates/basic/eslint.config.js +98 -0
package/templates/basic/gitignore +3 -0
package/templates/basic/package.json +27 -3
package/templates/basic/scripts/setup-husky.js +24 -0
package/templates/basic/src/Routers.tsx +4 -5
package/templates/basic/src/client/index.tsx +5 -1
package/templates/basic/src/component/Header.tsx +10 -10
package/templates/basic/src/component/Layout.tsx +9 -3
package/templates/basic/src/component/Theme.tsx +5 -1
package/templates/basic/src/containers/Home.tsx +141 -76
package/templates/basic/src/containers/Photo.tsx +30 -18
package/templates/basic/src/externals/window.d.ts +3 -1
package/templates/basic/src/reducers/photo.ts +7 -2
package/templates/basic/src/server/index.ts +35 -26
package/templates/basic/src/server/photo.ts +14 -7
package/templates/basic/src/server/utils.tsx +9 -7
package/templates/basic/src/services/home.ts +1 -1
package/templates/basic/src/services/photo.ts +28 -30
package/templates/basic/src/store/constants.ts +1 -1
package/templates/basic/src/store/index.ts +2 -1
package/templates/basic/src/styled/component/header.ts +5 -1
package/templates/basic/src/styled/home.ts +100 -24
package/templates/basic/src/styled/photo.ts +2 -2
package/templates/basic/src/utils/config.ts +1 -1
package/templates/basic/src/utils/fetch.ts +4 -8
package/templates/basic/src/utils/index.ts +1 -1

package/templates/basic/docs/DEVELOPMENT_GUIDE.md ADDED Viewed

@@ -0,0 +1,290 @@
+# NSBP 开发指南
+## 🚀 快速开始
+### 1. 安装依赖
+```bash
+# 使用 pnpm（Husky hooks 自动创建）
+pnpm install
+```
+⚠️ **注意**：Husky 9.x 会自动创建 Git hooks，无需运行 `pnpm run prepare`。
+### 2. 启动开发环境
+```bash
+# 开发模式（带热重载）
+pnpm run dev
+# 或分步启动
+pnpm run dev:init      # 初始化构建
+pnpm run dev:build:*  # 监听文件变化
+pnpm run dev:build:start # 启动服务器
+```
+### 3. 访问应用
+- **客户端渲染**: http://localhost:3001/
+- **服务端渲染**: http://localhost:3001/?seo=1
+- **BrowserSync**: http://localhost:3000/
+## 📝 开发工作流
+### 提交代码
+```bash
+# 1. 创建功能分支
+git checkout -b feat/your-feature
+# 2. 开发并测试
+# ...
+# 3. 格式化代码
+pnpm run format
+# 4. Lint 检查
+pnpm run lint
+# 5. 提交（Git hooks 自动运行 lint-staged）
+git add .
+git commit -m "feat: add new feature"
+# 6. 推送（Git hooks 自动运行 lint）
+git push origin feat/your-feature
+```
+### 提交信息格式
+遵循 Conventional Commits 规范：
+```
+<type>(<scope>): <subject>
+<body>
+<footer>
+```
+**类型 (type)**:
+- `feat`: 新功能
+- `fix`: Bug 修复
+- `docs`: 文档更新
+- `style`: 代码格式化
+- `refactor`: 重构（非功能或 Bug）
+- `test`: 测试相关
+- `chore`: 构建/工具链相关
+- `perf`: 性能优化
+- `ci`: CI 配置变更
+**示例**:
+```bash
+git commit -m "feat(core): add SSR data preloading support"
+git commit -m "fix(client): resolve hydration mismatch error"
+git commit -m "docs(readme): update installation guide"
+```
+## 🛠️ 常用命令
+### 开发命令
+```bash
+pnpm run dev              # 完整开发环境
+pnpm run dev:init        # 初始化构建
+pnpm run dev:build:*     # 监听文件变化
+pnpm run dev:build:start  # 启动开发服务器
+```
+### 构建命令
+```bash
+pnpm run build            # 生产构建
+pnpm run build:server     # 构建服务端
+pnpm run build:client     # 构建客户端
+pnpm run start            # 启动生产服务器
+```
+### 代码质量
+```bash
+pnpm run lint            # ESLint 检查
+pnpm run lint:fix        # ESLint 自动修复
+pnpm run format          # Prettier 格式化
+pnpm run lint-staged     # 对暂存文件运行 lint（Git 钩子自动执行）
+```
+### 清理命令
+```bash
+pnpm run clean           # 清理构建产物和缓存
+rm -rf .temp_cache      # 清理 Webpack 缓存
+rm -rf node_modules      # 清理依赖
+pnpm install            # 重新安装依赖
+```
+### Docker 命令
+```bash
+# 生产环境
+make build              # 构建镜像
+make prod               # 启动生产环境
+make logs               # 查看日志
+make restart            # 重启容器
+make shell              # 进入容器
+make down               # 停止容器
+make clean              # 完全清理
+# 开发环境
+make dev                # 启动开发环境
+make logs-dev           # 查看开发日志
+make rebuild-dev        # 重新构建并启动
+```
+## 📂 项目结构
+```
+nsbp/
+├── cli/                   # CLI 工具和模板
+│   ├── bin/             # CLI 二进制文件
+│   ├── templates/        # 项目模板
+│   └── scripts/          # 构建脚本
+├── config/               # Webpack 配置
+│   ├── webpack.base.js    # 基础配置
+│   ├── webpack.client.js  # 客户端配置
+│   └── webpack.server.js  # 服务端配置
+├── public/              # 静态资源输出目录
+├── src/                 # 源代码目录
+│   ├── client/          # 客户端入口
+│   ├── server/          # 服务端代码
+│   ├── containers/      # 页面组件
+│   ├── component/       # 公共组件
+│   ├── styled/          # 样式组件
+│   ├── services/        # API 服务
+│   ├── reducers/        # Redux reducers
+│   ├── store/           # Redux store
+│   └── utils/           # 工具函数
+├── scripts/             # Node.js 脚本
+├── docker/              # Docker 配置
+├── docs/                # 文档
+└── .husky/              # Git hooks
+```
+## 🔍 代码检查工具
+### ESLint
+- **配置文件**: `.eslintrc.js`
+- **忽略文件**: `.eslintignore`
+- **用途**: TypeScript + React 代码质量检查
+**规则**:
+- TypeScript: 类型检查、未使用变量警告
+- React: Hooks 规则、组件最佳实践
+- Prettier: 代码风格一致性
+### Prettier
+- **配置文件**: `.prettierrc.js`
+- **用途**: 自动格式化代码
+**配置**:
+- 2 空格缩进
+- 单引号
+- 无分号
+- 100 字符换行
+### Husky
+- **配置目录**: `.husky/`
+- **用途**: Git 钩子自动化
+**钩子**:
+- `pre-commit`: 提交前 lint 暂存文件
+- `pre-push`: 推送前全量 lint
+- `commit-msg`: 验证提交信息格式
+## 🐛 常见问题
+### Webpack 缓存错误
+**问题**:
+```
+Cannot find module 'xxx'
+Restoring failed for ResolverCachePlugin
+```
+**解决方案**:
+```bash
+# 清理缓存
+pnpm run clean
+rm -rf .temp_cache
+# 重新构建
+pnpm run dev
+```
+### Git 钩子失败
+**问题**:
+```
+husky - pre-commit hook failed
+```
+**解决方案**:
+```bash
+# 查看错误
+pnpm run lint
+# 自动修复
+pnpm run lint:fix
+# 重新提交
+git add .
+git commit -m "style: resolve linting issues"
+```
+### TypeScript 类型错误
+**问题**: 编辑器显示类型错误，但项目能编译
+**解决方案**:
+```bash
+# 重启 TypeScript 服务器
+# VSCode: Ctrl+Shift+P -> "TypeScript: Restart TS Server"
+# 确保项目已编译
+pnpm run build:server
+```
+### Docker 权限错误
+**问题**:
+```
+EACCES: permission denied
+```
+**解决方案**:
+Docker 已在 `entrypoint.sh` 中自动修复权限，无需手动处理。
+## 📚 相关文档
+- [ESLINT_AND_PRETTIER.md](./ESLINT_AND_PRETTIER.md) - 代码风格配置
+- [SETUP_GIT_HOOKS.md](./SETUP_GIT_HOOKS.md) - Git hooks 配置
+- [README.md](../README.md) - 项目总览
+## 💡 最佳实践
+1. **提交前**: 总是运行 `pnpm run format` 和 `pnpm run lint:fix`
+2. **分支管理**: 使用功能分支，不直接在 main/master 分支开发
+3. **提交信息**: 遵循 Conventional Commits 规范
+4. **代码审查**: 提交 PR 前自查代码质量和格式
+5. **定期清理**: 定期运行 `pnpm run clean` 清理缓存
+6. **依赖更新**: 使用 `pnpm update` 而不是手动修改版本号
+## 🎯 下一步
+- [ ] 配置 CI/CD 流程
+- [ ] 添加单元测试
+- [ ] 添加 E2E 测试
+- [ ] 配置代码覆盖率
+- [ ] 设置自动化部署

package/templates/basic/docs/ESLINT_AND_PRETTIER.md ADDED Viewed

@@ -0,0 +1,184 @@
+# ESLint & Prettier 配置指南
+本项目使用 ESLint + Prettier 进行代码风格检查和格式化。
+## 📦 已安装的包
+```json
+{
+  "eslint": "^9.0.0",
+  "eslint-config-prettier": "^9.0.0",
+  "eslint-plugin-react": "^7.37.0",
+  "eslint-plugin-react-hooks": "^5.0.0",
+  "husky": "^9.0.0",
+  "lint-staged": "^15.0.0",
+  "prettier": "^3.3.0",
+  "prettier-plugin-organize-imports": "^4.0.0",
+  "@typescript-eslint/eslint-plugin": "^8.0.0",
+  "@typescript-eslint/parser": "^8.0.0"
+}
+```
+## 🔧 配置文件
+### ESLint
+- `.eslintrc.js` - ESLint 配置
+- `.eslintignore` - ESLint 忽略规则
+### Prettier
+- `.prettierrc.js` - Prettier 配置
+### Husky
+- `.husky/pre-commit` - 提交前钩子
+- `.husky/pre-push` - 推送前钩子
+- `.husky/commit-msg` - 提交信息验证
+## 📝 可用命令
+```bash
+# Lint 检查（不修复）
+pnpm run lint
+# Lint 检查并自动修复
+pnpm run lint:fix
+# 格式化代码
+pnpm run format
+# 同时 lint 和格式化（Git 钩子自动执行）
+pnpm run lint-staged
+```
+## 🔍 ESLint 规则
+### TypeScript 规则
+- `@typescript-eslint/no-explicit-any`: 警告 - 允许 `any` 类型
+- `@typescript-eslint/no-unused-vars`: 警告 - 未使用的变量（允许 `_` 开头）
+### React 规则
+- `react/react-in-jsx-scope`: 关闭 - 不需要显式 React 导入
+- `react/prop-types`: 关闭 - 使用 TypeScript 类型系统
+- `react-hooks/rules-of-hooks`: 错误 - 遵循 React Hooks 规则
+- `react-hooks/exhaustive-deps`: 警告 - Hooks 依赖项检查
+### 其他规则
+- `prettier/prettier`: 错误 - 代码风格必须符合 Prettier 配置
+- `no-console`: 警告 - 允许 `console.warn` 和 `console.error`
+## 🎨 Prettier 配置
+```javascript
+{
+  semi: false,              // 不使用分号
+  singleQuote: true,        // 使用单引号
+  tabWidth: 2,             // 2 空格缩进
+  trailingComma: 'es5',    // ES5 尾部逗号
+  printWidth: 100,         // 每行最多 100 字符
+  arrowParens: 'always',   // 箭头函数总是加括号
+  endOfLine: 'lf',         // Unix 换行符
+}
+```
+## 📁 忽略的文件
+ESLint 会忽略以下目录和文件：
+- `node_modules/`
+- `build/`
+- `dist/`
+- `.temp_cache/`
+- `public/js/`
+- `public/css/`
+- `*.bundle.js`
+- `loadable-stats.json`
+- `coverage/`
+- Webpack 配置文件（`*.config.js`）
+## 🚨 常见问题
+### 1. Git 钩子阻止提交
+**问题**：提交代码时，Git 钩子失败
+**解决方案**：
+```bash
+# 查看错误信息
+pnpm run lint
+# 自动修复
+pnpm run lint:fix
+# 重新提交
+git add .
+git commit -m "fix: resolve linting issues"
+```
+### 2. TypeScript 类型错误
+**问题**：ESLint 报告类型错误
+**解决方案**：
+- 确保项目已编译：`pnpm run build:server`
+- 重启 TypeScript 服务器（TS Language Server）
+### 3. Prettier 格式冲突
+**问题**：手动格式化后，ESLint 仍然报错
+**解决方案**：
+```bash
+# 使用 Prettier 重新格式化
+pnpm run format
+# 确保编辑器使用 Prettier
+# VSCode: 安装 Prettier 插件，启用 "Format on Save"
+```
+### 4. 跳过 Git 钩子（不推荐）
+```bash
+git commit --no-verify -m "your commit message"
+git push --no-verify
+```
+⚠️ **警告**：仅在紧急情况下使用！
+## 🎯 编辑器配置
+### VSCode
+推荐安装扩展：
+- ESLint
+- Prettier - Code formatter
+- TypeScript Importer
+项目根目录创建 `.vscode/settings.json`：
+```json
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ]
+}
+```
+## 📚 参考资料
+- [ESlint 文档](https://eslint.org/docs/latest/)
+- [Prettier 文档](https://prettier.io/docs/en/options)
+- [React Hooks 规则](https://react-hooks.vercel.app/)
+- [Conventional Commits](https://www.conventionalcommits.org/)

package/templates/basic/docs/HUSKY_9_UPGRADE.md ADDED Viewed

@@ -0,0 +1,76 @@
+# Husky 9.x 升级说明
+## ℹ️ 关于 "husky install command is DEPRECATED" 警告
+这是正常的！Husky 9.x 版本已经改变了安装方式。
+### 变化说明
+**Husky 8.x (旧版本)**:
+- 需要手动运行 `husky install` 命令
+- `prepare` 脚本：`"prepare": "husky install"`
+**Husky 9.x (新版本)**:
+- ✅ Hooks 在 `pnpm install` 时自动创建
+- ✅ 不需要手动运行 `husky install`
+- ✅ `prepare` 脚本：`"prepare": "husky"`（仅注册命令）
+### 如何工作
+运行 `pnpm install` 时：
+1. Husky 自动创建 `.husky` 目录
+2. 自动生成 Git hooks（pre-commit, pre-push, commit-msg）
+3. 设置 Git hooks 路径：`git config core.hooksPath .husky`
+### 当前配置
+```json
+{
+  "prepare": "husky"  // 正确！注册 Husky 命令
+}
+```
+### 验证安装
+```bash
+# 检查 hooks 是否存在
+ls .husky
+# 应该看到: pre-commit, pre-push, commit-msg
+# 检查 hooks 是否有执行权限
+ls -la .husky/
+# 应该看到: -rwxr-xr-x
+# 测试提交
+git commit -m "test: verify hooks"
+# 应该自动运行 lint-staged
+```
+### 无需操作
+这个警告可以安全忽略！🎉 你的项目已经正确配置了 Husky 9.x。
+---
+## 🔄 升级步骤（如需）
+如果你之前使用的是 Husky 8.x，需要：
+1. **更新 package.json**:
+   ```json
+   {
+     "prepare": "husky"  // 从 "husky install" 改为 "husky"
+   }
+   ```
+2. **重新安装依赖**:
+   ```bash
+   pnpm install
+   ```
+3. **验证 hooks**:
+   ```bash
+   ls .husky
+   ```
+完成！Husky 9.x 现在可以正常工作。