前端脚手架 create-whf 实现 ​

// build.config.ts
import { defineBuildConfig } from 'unbuild'

export default defineBuildConfig({
  // 入口文件
  entries: ['src/index'],
  // 每次打包先清空 dist 目录
  clean: true,
  rollup: {
    inlineDependencies: true,
    esbuild: {
      // 开启压缩
      minify: true,
    },
  },
  alias: {
    // 这一行是从 create-vite 抄过来的，为了保证包路径引用正常
    prompts: 'prompts/lib/index.js',
  },
})

// src/contant.ts
import { blue, yellow } from 'kolorist'

interface IFrameWorks {
  value: string
  title: string
  // 名称叫 ui 原因：
  // 一开始是想以模板安装不同 ui 库来作区分，但后来想到用户想用什么 ui
  // 库让他们自己选择就行了，但是我又懒得改了，所以就叫 ui 字段了
  ui: IFrameWork[]
}

/**
 * @desc 框架模板选择
 */
export const framework = [
  {
    value: 'vue',
    title: 'vue3 + ts',
    ui: [
      { value: 'simple', title: yellow('简易') },
      { value: 'complete', title: blue('简易') },
      // 以后如果出其他模板也可以加在这里后面
    ],
  },
  {
    value: 'react',
    title: 'react18 + ts',
    ui: [
      { value: 'simple', title: yellow('简易') },
      { value: 'complete', title: blue('简易') },
    ],
  },
] as IFrameWorks[]

// src/index.ts
import { reset } from 'kolorist'
import prompts from 'prompts'

const createProject = async () => {
  //
  const defaultProjectName = `whf-vite-project`

  try {
    // res 是一个用户输入的信息组成的对象
    const res = (await prompts([
      {
        type: 'text', // 文本类型
        name: 'projectName', // 字段名
        message: reset('请输入项目名称'), // 类似 input 的 placeholder 效果
        initial: defaultProjectName, // 默认值
      },
      {
        type: 'select', // 选择类型
        name: 'framework', // 字段名
        message: reset('请选择框架'),
        initial: 0,
        choices: getFrameworkList(), // Array 返回框架类型
      },
      {
        type: 'select',
        name: 'frameworkType',
        message: reset('请选择项目模板'),
        initial: 0,
        // Array 返回框架类型
        choices: (framework: string) => getFrameworkTypeList(framework),
      },
    ])) as IProjectBaseInfo

    // res ==> { projectName: 'xx', framework: 'vue' | 'react', frameworkType: 'xxx' }
    // 下载模板的逻辑
    // downloadTemplate(res)
  } catch (err) {
    throw new Error('出错了.....')
  }
}

createProject()

// src/download.ts

// 用户终端执行的地址
const cwd = process.cwd()
// 新建项目的根目录地址
let root: string = ''
// 模板路径
let targetTemplateDir: string = ''

/**
 * @desc 下载模板文件
 * @param source 用户输入的信息
 */
export const downloadTemplate = async (source: IProjectBaseInfo) => {
  const { projectName } = source
  root = path.join(cwd, projectName)

  // 判断新项目文件夹是不是 不存在，若已存在则报错
  if (fs.existsSync(root)) {
    console.log()
    console.log(red('<------------目标文件夹已存在，无法创建------------->'))
    console.log()
    return
  } else {
    console.log()
    console.log(red('-------------------开始创建项目---------------------'))
    console.log()

    // 将模板项目文件夹复制到本地
    copyTemplateFile(root, source)
    // 创建成功提示
    showSuccessTip(projectName)
  }
}

// src/utils.ts
import fs from 'fs'

/**
 * @desc 拷贝文件，将模板文件（夹）拷贝到新建的项目文件夹里
 * @param src 要复制的源文件名
 * @param dest 复制操作的目标文件名
 */
export const copy = (src: string, dest: string) => {
  // 获取文件信息， 包括 mtime，ctime （用于协商缓存）等属性方法
  // https://juejin.cn/post/6955011872298893319
  const stat = fs.statSync(src)

  if (stat.isDirectory()) {
    // 如果是文件夹的话，拷贝文件夹
    copyDir(src, dest)
  } else {
    // 文件的话直接拷贝
    // http://nodejs.cn/api-v14/fs/fs_copyfilesync_src_dest_mode.html
    try {
      console.log(green(`正在创建文件: ${dest}`))
      fs.copyFileSync(src, dest)
    } catch (err) {
      console.log(dest + ' 文件复制出错')
      throw new Error(err)
    }
  }
}

/**
 * @desc 拷贝文件夹
 * @param srcDir  要复制的源文件夹名
 * @param destDir  复制操作的目标文件夹名
 */
export const copyDir = (srcDir: string, destDir: string) => {
  // 在新项目的创建文件夹
  fs.mkdirSync(destDir, { recursive: true })

  // 读取模板项目里的目标文件夹，遍历所有文件，并将对应文件复制到新项目创建的文件夹里面去
  for (const file of fs.readdirSync(srcDir)) {
    const srcFile = path.resolve(srcDir, file)
    const destFile = path.resolve(destDir, file)
    copy(srcFile, destFile)
  }
}

/**
 * @desc 生成/修改文件
 * @param file 目标文件名
 * @param content 需要修改的内容
 */
const write = (file: string, content?: string) => {
  // 获取目标文件路径
  const destPath = path.join(root, renameFiles[file] ?? file)

  if (content) {
    // 改写模板文件内容，如 package.json
    fs.writeFileSync(destPath, content)
  } else {
    // 将目标模板的文件复制到新项目的文件夹里
    const srcPath = path.join(targetTemplateDir, file)
    copy(srcPath, destPath)
  }
}

/**
 * @desc 创建 package.json 文件
 * @param projectName 项目名
 */
const copyPkgFile = (projectName: string) => {
  try {
    const pkg = JSON.parse(fs.readFileSync(path.join(targetTemplateDir, `package.json`), 'utf-8'))
    // 更改 name 字段
    pkg.name = projectName
    // 重写 package.json, 并复制到新项目中
    write('package.json', JSON.stringify(pkg, null, 2))
  } catch (err) {
    throw Error('创建 package.json 时出现异常')
  }
}