【架构师（第二十篇）】脚手架之自定义模板及第一阶段总结

最新推荐文章于 2025-07-30 03:43:55 发布

原创最新推荐文章于 2025-07-30 03:43:55 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #node.js #前端

本文档详细介绍了自定义项目模板的开发过程，包括在hzw-cli-dev-template模块下创建hzw-cli-dev-template-custom-vue3模板，修改package.json，添加main字段及index.js文件。同时，展示了installCustomTemplate函数的实现，用于查询并执行自定义模板。此外，还展示了hzw-cli-dev-template-custom-vue3的index.js内容，该文件包含了ejs模板渲染和安装逻辑。作者表示在第一阶段完成了脚手架创建项目功能，并计划在后续阶段补充更多功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义项目模板开发

在 hzw-cli-dev-template 这个模块下，新建模板 hzw-cli-dev-template-custom-vue3。

修改 package.json ，添加 main 字段

 "main": "index.js"

添加 index.js

function install(options) {
  console.log(options);
}

module.exports = install

发布到 npm

数据库添加一条新的数据

自定义模板安装逻辑开发

commands\init\lib\index.js installCustomTemplate

 /**
   * @description: 安装自定义模板
   * @param {*}
   * @return {*}
   */
  async installCustomTemplate() {
    // 查询自定义模板的入口文件
    if (await this.templateNpm.exists()) {
      const rootFile = this.templateNpm.getRootFilePath();
      if (fs.existsSync(rootFile)) {
        //开始执行自定义模板
        const templatePath = path.resolve(this.templateNpm.cacheFilePath, 'template')
        const options = {
          templateInfo: this.templateInfo,
          projectInfo: this.projectInfo,
          targetPath: process.cwd(),
          sourcePath: templatePath
        }
        const code = `require("${rootFile}")(${JSON.stringify(options)})`
        await execAsync('node', ['-e', code], { stdio: 'inherit', cwd: process.cwd() })
        // 自定义模板安装成功
      }
    }
  }

hzw-cli-dev-template-custom-vue3\index.js

const fse = require("fse")
const inquirer = require('inquirer')
const glob = require('glob')
const ejs = require('ejs')

/**
 * @description: ejs 模板渲染
 * @param {*}
 * @return {*}
 */
async function ejsRender(options) {
  return new Promise((resolve, reject) => {
    // 遍历文件列表
    glob("**", {
      cwd: options.targetPath,
      nodir: true,
      ignore: options.ignore || []
    }, (err, files) => {
      if (err) {
        reject(err)
      }
      // 对文件列表使用 ejs 进行渲染
      Promise.all(files.map((file) => {
        const filePath = path.join(process.cwd(), file)
        return new Promise((resolve1, reject1) => {
          ejs.renderFile(filePath, options, {}, (err, res) => {
            if (err) {
              reject1(err)
            }
            // 将源文件替换成 ejs 渲染后的文件
            fse.writeFileSync(filePath, res)
            resolve1(res)
          })
        })
      }))
        .then(() => resolve(files))
        .catch((err) => reject(err))
    })
  })
}

async function install(options) {
  const promptArr = []
  const descriptPrompt = {
    type: 'input',
    message: '请输入组件描述',
    name: 'description',
    validate: (a) => {
      if (a) {
        return true;
      }
      return '组件描述不可以为空';
    },
  }
  promptArr.push(descriptPrompt)
  const answer = await inquirer.prompt(promptArr);
  options.description = answer.description
  // 获取模板缓存路径
  // 获取模板所在目录 获取当前目录
  const { sourcePath, targetPath } = options
  try {
    // 确保目录存在 不存在会创建
    fse.ensureDirSync(sourcePath);
    fse.ensureDirSync(targetPath);
    // 拷贝模板到当前目录
    fse.copySync(templatePath, targetPath)
    // ejs 模板渲染
    options.ignore = ['node_modules/**', ...options.templateInfo.ignore]
    // const ops = { ignore }
    await ejsRender(options)
    // const { installCommand, startCommand } = this.templateInfo
    // 依赖安装
    // await this.execCommand(installCommand, '依赖安装成功')
    // 启动命令
    // await this.execCommand(startCommand, '项目启动成功')
  } catch (error) {
    log.error(error.message)
  } finally {
    spinner.stop(true)
    log.warn('模板安装成功')
  }
}

module.exports = install