首页
学习
活动
专区
圈层
工具
发布
50 篇文章
1
【架构师(第一篇)】整体需求分析和架构设计
2
【架构师(第二篇)】脚手架架构设计和框架搭建
3
【架构师(第三篇)】脚手架开发之掌握Lerna操作流程
4
【架构师(第四篇)】脚手架开发之Lerna源码分析
5
【架构师(第五篇)】脚手架之import-local执行流程及简历设计
6
【架构师(第六篇)】脚手架之需求分析和架构设计
7
【架构师(第七篇)】脚手架之准备阶段编写
8
【架构师(第八篇)】脚手架之 commander 框架使用方法
9
【架构师(第九篇)】如何让 Node 环境支持 ES Module
10
【架构师(第十篇)】脚手架之注册命令及架构优化
11
【架构师(第十一篇)】脚手架之命令注册和执行过程开发
12
【架构师(第十二篇)】脚手架之命令行交互工具 inquirer.js 使用方法
13
【架构师(第十三篇)】脚手架之创建项目准备阶段开发
14
【架构师(第十四篇)】脚手架之 egg.js 和 mongodb 的使用
15
【架构师(第十五篇)】脚手架之创建项目模板开发
16
【架构师(第十六篇)】脚手架之创建项目模板的下载与更新
17
【架构师(第十七篇)】脚手架之 ejs 和 glob 的使用
18
【架构师(第十八篇)】脚手架之项目模板的安装
19
【架构师(第十九篇)】脚手架之组件库模板开发
20
【架构师(第二十篇)】脚手架之自定义模板及第一阶段总结
21
【架构师(第二十一篇)】编辑器开发之需求分析和架构设计
22
【架构师(第二十二篇)】编辑器开发之项目整体搭建
23
【架构师(第二十三篇)】编辑器开发之画布区域组件的渲染
24
【架构师(第二十四篇)】编辑器开发之添加模版到画布
25
【架构师(第二十五篇)】编辑器开发之属性编辑区域表单渲染
26
【架构师(第二十六篇)】编辑器开发之属性编辑同步渲染
27
【架构师(第二十七篇)】前端单元测试框架 Jest 基础知识入门
28
【架构师(第二十八篇)】 测试工具 Vue-Test-Utils 基础语法
29
【架构师(第二十九篇)】Vue-Test-Utils 触发事件和异步请求
30
【架构师(第三十篇)】Vue-Test-Utils 全局组件和第三方库 vuex | vue-router
31
【架构师(第三十一篇)】前端测试之 TDD 的开发方式
32
【架构师(第三十二篇)】 通用上传组件开发及测试用例
33
【架构师(第三十三篇)】 Vue 中的实例及本地图片预览
34
【架构师(第三十四篇)】 业务组件库开发之 vue3 的插件系统
35
【架构师(第三十五篇)】 业务组件库开发之使用 Rollup 进行打包
36
【架构师(第三十六篇)】 业务组件库开发之发布到 NPM
37
【架构师(第三十七篇)】 服务端开发之后端框架与数据库技术选型
38
【架构师(第三十八篇)】 服务端开发之本地安装最新版 MySQL 数据库
39
【架构师(第三十九篇)】 服务端开发之连接 MySQL 数据库
40
【架构师(第四十篇)】 服务端开发之连接 Mongodb 数据库
41
【架构师(第四十一篇)】 服务端开发之安装并连接 Redis数据库
42
【架构师(第四十二篇)】 服务端开发之常用的登录鉴权方式
43
【架构师(第四十三篇)】 服务端开发之单元测试和接口测试
44
【架构师(第四十四篇)】 服务端开发之 pm2 和 nginx 介绍
45
【架构师(第四十五篇)】 服务端开发之认识 Github actions
46
【架构师(第四十六篇)】 服务端开发之安装 Docker
47
【架构师(第四十七篇)】 服务端开发之认识 Docker
48
【架构师(第四十八篇)】 服务端开发之 Dockerfile
49
【架构师(第四十九篇)】 服务端开发之认识 Docker-compose
50
【架构师(第五十篇)】 服务端开发之自动发布到测试机
清单首页架构文章详情

【架构师(第十三篇)】脚手架之创建项目准备阶段开发


将收获什么

  • 掌握命令行交互方法
  • 服务端框架 egg.js 的应用和 api 开发方法
  • egg.js 集成云 mongodb 实现数据存储

主要内容

  • 脚手架项目创建功能架构设计
  • 通过命令行交互获取项目基本信息
  • egg.js + 云 mongodb 的集成
  • 开发前端项目模板
  • egg.js 获取项目模板 API 开发
  • 项目模板下载功能开发
  • inquirer 源码解析,彻底搞懂命令行交互

创建功能架构设计

  • 可拓展:能够快速复用到不同团队,适应不同团队之间的差异
  • 低成本:在不改动脚手架源码的情况下新增模板,且新增模板的成本很低
  • 高性能:控制存储空间,安装时充分利用 node 多进程提升安装性能

创建功能架构设计图

准备阶段

下载模板阶段

安装模板阶段

准备阶段开发

代码语言:javascript
复制
// commands\init\lib\index.js
'use strict';

const fs = require('fs');
const Command = require('@hzw-cli-dev/command');
const log = require('@hzw-cli-dev/log');
const inquirer = require('inquirer');
const fse = require('fs-extra');
const semver = require('semver');
const TYPE_PROJECT = 'project';
const TYPE_COMPONENT = 'component';

/**
 * @description: init 命令 , 继承于 Command
 * @param {*}
 * @return {*}
 */
class InitCommand extends Command {
  /**
   * @description:命令的初始化阶段
   * @param {*}
   * @return {*}
   */
  init() {
    // 项目名称
    this.projectName = this._argv[0] || 'project';
    // 是否携带 force 参数
    this.force = !!this._argv[1].force;
    log.verbose('🚀🚀 ~ 是否强制安装', this.force);
    log.verbose('🚀🚀 ~ 项目名称', this.projectName);
  }
  /**
   * @description: 命令的执行阶段
   * @param {*}
   * @return {*}
   */
  async exec() {
    try {
      // 1.准备阶段
      const ret = await this.prepare();
      if (ret) {
        // 2.下载模板
        // 3.安装模板
      }
    } catch (error) {
      log.error(error.message);
    }
  }
  /**
   * @description:准备阶段
   * @param {*}
   * @return {*}
   */
  async prepare() {
    // 获取当前目录  path.resolve('.') 也可以拿到
    const localPath = process.cwd();
    // 1.判断当前目录是否为空
    const isEmpty = this.isDirEmpty(localPath);
    let isContinue = false;
    if (!isEmpty) {
      if (!this.force) {
        // 询问用户是继续
        const res = await inquirer.prompt([
          {
            type: 'confirm',
            name: 'isContinue',
            message: '当前文件夹内容不为空,是否在此继续创建项目?',
            default: false,
          },
        ]);
        isContinue = res.isContinue;
        if (!isContinue) {
          return false;
        }
      }
      // 2.是否启动强制安装
      // 清空文件夹进行创建
      if (isContinue || this.force) {
        const { isDelete } = await inquirer.prompt([
          {
            type: 'confirm',
            name: 'isDelete',
            message: '是否清空当前目录下的文件?',
            default: false,
          },
        ]);
        if (isDelete) {
          // 清空当前目录
          fse.emptyDirSync(localPath);
        }
      }
    }
    // 3.选择创建项目或者组件
    // 4.获取项目的基本信息 return Object
    return this.getInfo();
  }

  /**
   * @description: 选择创建项目或者组件 获取项目的基本信息 return Object
   * @param {*}
   * @return {*} 项目的基本信息
   */
  async getInfo() {
    const info = {};
    // 选择创建项目或者组件;
    const { type } = await inquirer.prompt({
      type: 'list',
      message: '请选择初始化类型',
      name: 'type',
      default: TYPE_PROJECT,
      choices: [
        {
          name: '项目',
          value: TYPE_PROJECT,
        },
        {
          name: '组件',
          value: TYPE_COMPONENT,
        },
      ],
    });
    log.verbose('type', type);
    // 获取项目的基本信息;
    if (type === TYPE_COMPONENT) {
    }
    if (type === TYPE_PROJECT) {
      const o = await inquirer.prompt([
        {
          type: 'input',
          message: '请输入项目名称',
          name: 'project',
          validate: (a) => {
            const reg =
              /^[a-zA-Z]+([-][a-zA-Z0-9]|[_][a-zA-Z0-9]|[a-zA-Z0-9])*$/;
            if (reg.test(a)) {
              return true;
            }
            return '要求英文字母开头,数字或字母结尾,字符只允许使用 - 以及 _ ';
          },
        },
        {
          type: 'input',
          message: '请输入项目版本号',
          name: 'version',
          default: '1.0.0',
          validate: (a) => {
            return !!semver.valid(a) || '请输入合法的版本号';
          },
          filter: (a) => {
            if (!!semver.valid(a)) {
              return semver.valid(a);
            }
            return a;
          },
        },
      ]);
      console.log('🚀🚀 ~ InitCommand ~ o', o);
    }
    return info;
  }

  /**
   * @description: 判断当前目录是否为空
   * @param {*}
   * @return { Boolean }  true 空的  false  不是空的
   */
  isDirEmpty(localPath) {
    // 读取当前目录下所有文件
    let fileList = fs.readdirSync(localPath);
    // 过滤掉不影响的文件目录(白名单)
    fileList = fileList.filter(
      (file) => !file.startsWith('.') &amp;&amp; ['node_modules'].indexOf(file) < 0,
    );
    // 没有目录 或者 文件数量为 0 返回 true
    return !fileList || fileList.length === 0;
  }
}

/**
 * @description: 返回 InitCommand 的实例
 * @param {*} argv : projectName  项目名称 , 命令的 options  , commander实例
 * @return {*}
 */
function init(argv) {
  return new InitCommand(argv);
}

module.exports = init;
module.exports.InitCommand = InitCommand;
下一篇
举报
领券