nsbp-cli 0.1.0

package/scripts/sync-template.js

@@ -0,0 +1,277 @@
+#!/usr/bin/env node
+/**
+ * 同步 NSBP 主项目代码到 CLI 模板目录
+ * 使用：node scripts/sync-template.js
+ */
+
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+
+// 路径配置
+const ROOT_DIR = path.resolve(__dirname, '../..'); // nsbp 项目根目录
+const CLI_DIR = path.resolve(__dirname, '..'); // cli 目录
+const TARGET_DIR = path.join(CLI_DIR, 'templates/basic');
+
+// 要复制的文件和目录列表
+const COPY_ITEMS = [
+  'src',
+  'public',
+  'scripts',
+  'webpack.base.js',
+  'webpack.client.js',
+  'webpack.server.js',
+  'tsconfig.json',
+  'postcss.config.js',
+  '.gitignore',
+  '.prettierrc',
+  '.prettierignore',
+  'README.md',
+  'package.json'
+];
+
+// 排除的模式（相对路径包含这些字符串的文件将被跳过）
+const EXCLUDE_PATTERNS = [
+  '/node_modules/',
+  '/.temp_cache/',
+  '/build/',
+  '/.git/',
+  '.DS_Store',
+  '/.serena/',
+  '/.vscode/',
+  '/.idea/',
+  '.log',
+  '.tmp',
+  // 构建产物 - 匹配 public 下的特定文件
+  'public/js/',
+  'public/css/',
+  'public/client.',
+  'public/*.js',
+  'public/*.js.map',
+  'public/*.txt',
+  'public/*.json'
+];
+
+// 特殊文件处理配置
+const SPECIAL_FILES = {
+  'package.json': (content) => {
+    const pkg = JSON.parse(content);
+    // 修改为模板名称
+    pkg.name = 'nsbp-template';
+    pkg.description = 'node react ssr by webpack';
+    // 确保版本号
+    pkg.version = '1.0.0';
+    return JSON.stringify(pkg, null, 2);
+  }
+};
+
+// 主函数
+async function syncTemplate() {
+  console.log(chalk.cyan('🔄 开始同步 NSBP 主项目代码到 CLI 模板...'));
+  console.log(chalk.gray(`源目录: ${ROOT_DIR}`));
+  console.log(chalk.gray(`目标目录: ${TARGET_DIR}`));
+
+  // 验证源目录
+  if (!fs.existsSync(ROOT_DIR)) {
+    console.error(chalk.red(`❌ 源目录不存在: ${ROOT_DIR}`));
+    process.exit(1);
+  }
+
+  // 清理目标目录（但保留 templates/basic 本身）
+  if (fs.existsSync(TARGET_DIR)) {
+    console.log(chalk.gray('🧹 清理目标目录...'));
+    await fs.emptyDir(TARGET_DIR);
+  } else {
+    await fs.ensureDir(TARGET_DIR);
+  }
+
+  // 复制文件
+  console.log(chalk.cyan('📦 复制项目文件...'));
+  let copiedCount = 0;
+  let skippedCount = 0;
+
+  for (const item of COPY_ITEMS) {
+    const source = path.join(ROOT_DIR, item);
+    const target = path.join(TARGET_DIR, item);
+
+    if (!fs.existsSync(source)) {
+      console.log(chalk.yellow(`⚠️  源文件不存在，跳过: ${item}`));
+      skippedCount++;
+      continue;
+    }
+
+    // 检查是否为排除项
+    const shouldExclude = EXCLUDE_PATTERNS.some(pattern => {
+      if (pattern.includes('*')) {
+        // 简单的通配符匹配（仅支持后缀）
+        if (pattern.startsWith('*')) {
+          const ext = pattern.substring(1);
+          return item.endsWith(ext);
+        }
+      }
+      return item.includes(pattern);
+    });
+
+    if (shouldExclude) {
+      console.log(chalk.gray(`  跳过排除项: ${item}`));
+      skippedCount++;
+      continue;
+    }
+
+    try {
+      const stat = fs.statSync(source);
+      
+      if (stat.isDirectory()) {
+        // 复制目录，使用自定义过滤器
+        await fs.copy(source, target, {
+        filter: (src) => {
+            const relativePath = path.relative(source, src);
+            // 检查是否匹配排除模式
+            for (const pattern of EXCLUDE_PATTERNS) {
+                if (relativePath.includes(pattern)) {
+                    return false;
+                }
+                // 简单的通配符匹配
+                if (pattern.includes('*')) {
+                    const [prefix] = pattern.split('*');
+                    if (relativePath.startsWith(prefix)) {
+                        return false;
+                    }
+                }
+            }
+            
+            // 排除构建产物文件（避免复制 .js, .js.map, .css, .css.map, .txt, .json 等）
+            // 仅对 public 目录应用此过滤
+            if (item === 'public') {
+                const buildArtifactPatterns = [
+                    '.js.map',
+                    '.css.map',
+                    '.js',
+                    '.css',
+                    '.txt',
+                    '.json',
+                    '.LICENSE.txt'
+                ];
+                
+                // 只检查文件，不检查目录
+                try {
+                    const stat = fs.statSync(src);
+                    if (stat.isFile()) {
+                        const name = path.basename(src);
+                        
+                        // 检查构建产物模式
+                        for (const pattern of buildArtifactPatterns) {
+                            if (name.endsWith(pattern)) {
+                                // 但保留 favicon.ico
+                                if (name === 'favicon.ico') {
+                                    return true;
+                                }
+                                return false;
+                            }
+                        }
+                    }
+                } catch (err) {
+                    // 如果无法获取状态，继续复制
+                    console.warn(chalk.yellow(`⚠️  无法检查文件状态: ${src}`), err.message);
+                }
+            }
+            
+            return true;
+        }
+        });
+        console.log(chalk.green(`  目录复制: ${item}`));
+      } else {
+        // 复制文件
+        await fs.copy(source, target);
+        
+        // 特殊文件处理
+        const basename = path.basename(item);
+        if (SPECIAL_FILES[basename]) {
+          const content = await fs.readFile(target, 'utf8');
+          const processed = SPECIAL_FILES[basename](content);
+          await fs.writeFile(target, processed, 'utf8');
+          console.log(chalk.green(`  文件处理: ${item} (已模板化)`));
+        } else {
+          console.log(chalk.green(`  文件复制: ${item}`));
+        }
+      }
+      copiedCount++;
+    } catch (error) {
+      console.error(chalk.red(`❌ 复制失败: ${item}`), error.message);
+    }
+  }
+
+  // 确保必要的目录存在（即使源目录为空）
+  const requiredDirs = ['public/css', 'public/js', 'public/images'];
+  for (const dir of requiredDirs) {
+    const dirPath = path.join(TARGET_DIR, dir);
+    if (!fs.existsSync(dirPath)) {
+      await fs.ensureDir(dirPath);
+      console.log(chalk.gray(`  创建目录: ${dir}`));
+    }
+  }
+
+  // 清理 public 目录中的构建产物
+  console.log(chalk.cyan('🧹 清理构建产物...'));
+  const publicDir = path.join(TARGET_DIR, 'public');
+  if (fs.existsSync(publicDir)) {
+    const items = await fs.readdir(publicDir, { withFileTypes: true });
+    for (const item of items) {
+      const itemPath = path.join(publicDir, item.name);
+      // 删除 .js, .js.map, .txt, .json 文件（但保留 favicon.ico 和目录）
+      if (item.isFile()) {
+        const ext = path.extname(item.name);
+        if (['.js', '.js.map', '.txt', '.json', '.css'].includes(ext) && item.name !== 'favicon.ico') {
+          await fs.remove(itemPath);
+          console.log(chalk.gray(`    删除: ${item.name}`));
+        }
+      }
+    }
+    // 清理子目录中的文件
+    const subDirs = ['css', 'js'];
+    for (const subDir of subDirs) {
+      const subDirPath = path.join(publicDir, subDir);
+      if (fs.existsSync(subDirPath)) {
+        const subItems = await fs.readdir(subDirPath, { withFileTypes: true });
+        for (const subItem of subItems) {
+          if (subItem.isFile()) {
+            await fs.remove(path.join(subDirPath, subItem.name));
+            console.log(chalk.gray(`    删除: ${subDir}/${subItem.name}`));
+          }
+        }
+      }
+    }
+  }
+
+  // 验证模板完整性
+  console.log(chalk.cyan('🔍 验证模板完整性...'));
+  const requiredFiles = ['src/Routers.tsx', 'scripts/start.js', 'package.json'];
+  let missingFiles = [];
+
+  for (const file of requiredFiles) {
+    if (!fs.existsSync(path.join(TARGET_DIR, file))) {
+      missingFiles.push(file);
+    }
+  }
+
+  if (missingFiles.length > 0) {
+    console.log(chalk.yellow(`⚠️  缺少必要文件: ${missingFiles.join(', ')}`));
+  } else {
+    console.log(chalk.green('✅ 模板完整性验证通过'));
+  }
+
+  console.log(chalk.cyan('\n📊 同步完成'));
+  console.log(chalk.green(`   复制文件: ${copiedCount} 个`));
+  console.log(chalk.yellow(`   跳过文件: ${skippedCount} 个`));
+  console.log(chalk.blue(`   目标目录: ${TARGET_DIR}`));
+  
+  if (missingFiles.length > 0) {
+    console.log(chalk.yellow('\n⚠️  警告：部分必要文件缺失，请检查源项目'));
+  }
+}
+
+// 执行
+syncTemplate().catch(error => {
+  console.error(chalk.red('❌ 同步过程中发生错误:'), error);
+  process.exit(1);
+});

package/templates/basic/.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+build
+yarn.lock
+package-lock.json
+public

package/templates/basic/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none"
+}

package/templates/basic/README.md

@@ -0,0 +1,13 @@
+# 开发
+- npm run dev   (开发运行)
+- npm run build (生产编译) 
+- npm start     (生产运行)
+
+客户端渲染
+http://localhost:3001/
+
+服务端渲染
+http://localhost:3001/?seo=1
+
+服务端渲染不成功，改为客户端渲染
+http://localhost:3001/?seo=1&from=link

package/templates/basic/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "nsbp-template",
+  "version": "1.0.0",
+  "description": "node react ssr by webpack",
+  "main": "index.js",
+  "scripts": {
+    "dev": "npm-run-all -l -s dev:init -p dev:build:*",
+    "dev:init": "cross-env INIT=1 webpack --config webpack.server.js --mode development",
+    "dev:build:server": "webpack --config webpack.server.js --mode development --watch",
+    "dev:build:client": "webpack --config webpack.client.js --mode development --watch",
+    "dev:build:start": "node ./scripts/start.js",
+    "build": "npm run clean && npm-run-all -l -p build:**",
+    "build:server": "webpack --config webpack.server.js --mode production",
+    "build:client": "webpack --config webpack.client.js --mode production",
+    "start": "node ./scripts/start.js",
+    "clean": "rimraf build && rimraf public/js && rimraf public/css && rimraf public/client.* && rimraf public/*.js && rimraf public/*.js.map && rimraf public/*.txt && rimraf public/*.json && rimraf .temp_cache",
+    "format": "prettier --write **/*.{js,css,less,scss,ts,tsx}",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "ssr",
+    "webpack",
+    "less",
+    "scss",
+    "sass",
+    "styled-components"
+  ],
+  "author": "Erishen Sun",
+  "license": "ISC",
+  "dependencies": {
+    "@loadable/component": "^5.15.0",
+    "@loadable/server": "^5.15.0",
+    "@redux-devtools/extension": "^3.3.0",
+    "@reduxjs/toolkit": "^2.11.2",
+    "axios": "^1.7.0",
+    "express": "^5.2.1",
+    "framer-motion": "^12.25.0",
+    "lodash": "^4.17.21",
+    "probe-image-size": "^7.1.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-helmet": "^6.1.0",
+    "react-redux": "^9.2.0",
+    "react-router-dom": "^7.12.0",
+    "redux": "^5.0.1",
+    "redux-thunk": "^3.1.0",
+    "sass": "^1.80.0",
+    "serialize-javascript": "^7.0.2",
+    "styled-components": "^6.3.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.0",
+    "@babel/plugin-transform-optional-chaining": "^7.25.0",
+    "@babel/preset-env": "^7.25.0",
+    "@babel/preset-react": "^7.24.0",
+    "@loadable/babel-plugin": "^5.13.2",
+    "@loadable/webpack-plugin": "^5.15.0",
+    "@types/express": "^5.0.6",
+    "@types/loadable__component": "^5.13.3",
+    "@types/loadable__server": "^5.12.5",
+    "@types/lodash": "^4.17.15",
+    "@types/probe-image-size": "^7.0.0",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "@types/react-helmet": "^6.1.10",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/serialize-javascript": "^5.0.3",
+    "@types/styled-components": "^5.1.36",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-styled-components": "^2.1.4",
+    "browser-sync": "^3.0.4",
+    "browser-sync-webpack-plugin": "^2.3.0",
+    "cross-env": "^10.1.0",
+    "cross-spawn": "^7.0.6",
+    "css-loader": "^7.1.0",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "html-webpack-plugin": "^5.6.0",
+    "less": "^4.2.0",
+    "less-loader": "^12.0.0",
+    "mini-css-extract-plugin": "^2.9.0",
+    "nodemon": "^3.1.0",
+    "npm-run-all": "^4.1.5",
+    "postcss-loader": "^8.1.0",
+    "postcss-preset-env": "^10.6.1",
+    "prettier": "^3.3.0",
+    "rimraf": "^6.1.2",
+    "sass-loader": "^16.0.0",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.0",
+    "ts-loader": "^9.5.0",
+    "typescript": "^5.0.0",
+    "typescript-loadable-components-plugin": "^1.0.2",
+    "webpack": "^5.96.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.1.0",
+    "webpack-node-externals": "^3.0.0"
+  }
+}

package/templates/basic/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    require('postcss-preset-env')({
+      browsers: 'last 2 versions'
+    })
+  ]
+}

package/templates/basic/scripts/start.js

@@ -0,0 +1,3 @@
+const { version } = require('../package.json')
+
+require(`../build/bundle.${version}.js`)

package/templates/basic/src/Routers.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { loadData as homeLoadData } from './services/home'
+import { loadData as photoLoadData } from './services/photo'
+import loadable from "@loadable/component"
+
+const Loading = () => {
+  return <div>Loading...</div>
+}
+
+const Home = loadable(() => import("./containers/Home"), {
+  fallback: <Loading />
+})
+
+const Login = loadable(() => import("./containers/Login"), {
+  fallback: <Loading />
+})
+
+const Photo = loadable(() => import("./containers/Photo"), {
+  fallback: <Loading />
+})
+
+export default [
+  {
+    path: '/',
+    element: <Home />,
+    loadData: homeLoadData, //传入loadData方法
+    key: 'home'
+  },
+  {
+    path: '/login',
+    element: <Login />,
+    key: 'login'
+  },
+  {
+    path: '/photo',
+    element: <Photo />,
+    loadData: homeLoadData, // 使用相同的 loadData 来预取图片菜单
+    key: 'photo'
+  }
+]

package/templates/basic/src/client/index.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react'
+import { hydrateRoot } from 'react-dom/client'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import routers from '../Routers'
+import { Provider } from 'react-redux'
+import getStore from '../store'
+import { isSEO } from '../utils'
+import Theme from '../component/Theme'
+import { loadableReady } from '@loadable/component'
+
+const App = () => {
+  const [store, setStore] = useState(getStore())
+
+  useEffect(() => {
+    if (isSEO()) {
+      setStore(getStore(window?.context?.state))
+    }
+  }, [])
+
+  return (
+    <Theme>
+      <Provider store={store}>
+        <BrowserRouter>
+          <Routes>
+            {routers.map((router) => (
+              <Route key={router.key} path={router.path} element={router.element} />
+            ))}
+          </Routes>
+        </BrowserRouter>
+      </Provider>
+    </Theme>
+  )
+}
+
+loadableReady(() => {
+  const root = hydrateRoot(document.getElementById('root')!, <App />)
+})

package/templates/basic/src/component/Header.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { Container, LogoWrapper as Logo, Nav, NavLink, Brand } from '../styled/component/header'
+
+const Header = () => {
+  const location = useLocation()
+
+  return (
+    <Container>
+      <Brand>
+        <Link to="/">
+          <Logo>
+            <span>N</span>sbp.js
+          </Logo>
+        </Link>
+      </Brand>
+      <Nav>
+        <Link to="/">
+          <NavLink $active={location.pathname === '/'}>
+            🏠 首页
+          </NavLink>
+        </Link>
+        <Link to="/login">
+          <NavLink $active={location.pathname === '/login'}>
+            🔐 登录
+          </NavLink>
+        </Link>
+        <Link to="/photo">
+          <NavLink $active={location.pathname === '/photo'}>
+            🖼️ 图片
+          </NavLink>
+        </Link>
+      </Nav>
+    </Container>
+  )
+}
+
+export default Header

package/templates/basic/src/component/Layout.tsx

@@ -0,0 +1,24 @@
+import React, { useState, useEffect } from 'react'
+import { Container } from '../styled/component/layout'
+import Loading from './Loading'
+
+const Layout = ({ children, query }: any) => {
+  let seo: any = 0
+  if (query) {
+    seo = query.seo
+  }
+
+  const [pageLoad, setPageLoad] = useState(
+    seo !== undefined ? parseInt(seo, 10) : 0
+  )
+
+  useEffect(() => {
+    if (pageLoad === 0) {
+      setPageLoad(1)
+    }
+  }, [])
+
+  return <Container>{pageLoad ? children : <Loading />}</Container>
+}
+
+export default Layout

package/templates/basic/src/component/Loading.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Loading = () => {
+  return <div>Loading...</div>
+}
+
+export default Loading

package/templates/basic/src/component/Theme.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { ThemeProvider } from 'styled-components'
+import { GlobalStyle, theme, theme2 } from '../styled/common'
+
+const Theme = ({ children }: any) => {
+  return (
+    <>
+      <GlobalStyle whiteColor={true} />
+      <ThemeProvider theme={theme2}>{children}</ThemeProvider>
+    </>
+  )
+}
+
+export default Theme