search

WangShuXian6 / blog

FE-BLOG
https://wangshuxian6.github.io/blog/
MIT License
46 stars 10 forks source link

Scaffolding tool 脚手架 #199

Open WangShuXian6 opened 2 months ago

WangShuXian6 commented 2 months ago

Scaffolding tool 脚手架

“脚手架”在编程或开发领域通常指的是“Scaffolding”，尤其是在构建项目时使用的初始项目模板或自动化工具。它帮助开发者快速生成项目的基本结构，配置必要的文件和依赖关系，从而减少手动设置的工作量。

在 Node.js 和前端开发中，"scaffolding tools"（脚手架工具）如 Yeoman、Vue CLI、Angular CLI 等，都会为开发者创建一个基础项目结构。

WangShuXian6 commented 2 months ago

空白脚手架 私有gitlab 仓库使用

创建项目仓库 fy-Admin-CLI

项目结构：

your-project/
├── bin/
│   └── admin-cli.js    # 改造后的脚手架脚本
├── templates/
│   ├── base-admin/          # 你的模板目录
│   ├── vue-admin/
│   └── react-admin/
└── package.json

安装 @inquirer/prompts 和 fs-extra 依赖

npm install @inquirer/prompts fs-extra

文件

bin\admin-cli.js

#!/usr/bin/env node

import { input, select } from '@inquirer/prompts';
import pkg from 'fs-extra';
const { copySync, existsSync } = pkg;
import path from 'path';
import { fileURLToPath } from 'url';

// 获取当前文件夹路径，兼容 ES 模块
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// 模板目录
const templatesDir = path.join(__dirname, '../templates');

// 生成默认的项目名称
function getDefaultProjectName() {
  const date = new Date();
  return `admin-project-${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`;
}

async function createProject() {
  // 获取用户输入的项目名称
  const projectName = await input({
    message: '请输入项目名称:',
    default: getDefaultProjectName() // 默认项目名称
  });

  // 获取用户选择的模板
  const template = await select({
    message: '请选择项目模板:',
    choices: (await import('fs')).readdirSync(templatesDir).map((template) => ({
      name: template,
      value: template
    })) // 动态读取可用模板
  });

  const targetDir = path.join(process.cwd(), projectName);
  const templateDir = path.join(templatesDir, template);

  // 检查项目文件夹是否已存在
  if (existsSync(targetDir)) {
    console.log(`目录名： ${projectName} 已存在，请输入其他目录名`);
    process.exit(1);
  }

  // 拷贝模板文件
  copySync(templateDir, targetDir);

  console.log(`项目 ${projectName} 创建成功，使用了模板： ${template} .`);
  console.log(`请进入项目文件夹后执行命令： npm install`);
}

// 运行项目创建
createProject();

templates\react-admin templates\react-admin\README.md

`.editorconfig

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

.gitignore

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

## new
# dependencies
node_modules/
examples/*/node_modules/
packages/*/node_modules/
packages/*/package-lock.json
package-lock.json

# build and test
build/
packages/*/dist/
packages/*/esm/
coverage/
scratch/
*.pyc
*.tsbuildinfo
scenarios/*/dist/

# logs
yarn-error.log
npm-debug.log
lerna-debug.log
local.log

# ide
.idea
*.sublime-*

# misc
.DS_Store
._*
.Spotlight-V100
.Trashes

.rpt2_cache

lint-results.json

# legacy
tmp.js

# eslint
.eslintcache
eslintcache/*

# Parcel
.cache

# dist
# yarn
yarn.lock
.log

# pnpm
pnpm-lock.yaml

package-lock.json

package.json

{
  "name": "fy-admin-cli",
  "version": "1.0.0",
  "type": "module",
  "bin": {
    "admin-cli": "./bin/admin-cli.js"
  },
  "dependencies": {
    "@inquirer/prompts": "^5.5.0",
    "fs-extra": "^11.2.0"
  }
}

测试脚本

node ./bin/admin-cli.js

提交代码到仓库

使用方法

npx git+http://x.x.x.x/x/fy-admin-cli.git
npx --registry=https://registry.npmmirror.com git+http://x.x.x.x/x/fy-admin-cli.git

如果提示 ：Need to install the following packages: 时，输入y 安装脚手架

image