粥里有勺糖

vuePress-theme-reco 粥里有勺糖    2018 - 2023
粥里有勺糖 粥里有勺糖

Choose mode

  • dark
  • auto
  • light
关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
author-avatar

粥里有勺糖

285

文章

40

标签

关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
  • wheel

    • 个人作品
    • 时间管理CLI工具
      • 做一个CLI版的时间管理工具(一)
      • 做一个CLI版的时间管理工具(十)
      • 做一个CLI版的时间管理工具(11)
      • 做一个CLI版的时间管理工具(12)
      • 做一个CLI版的时间管理工具(13)
      • 做一个CLI版的时间管理工具(14)
      • 做一个CLI版的时间管理工具(15)
      • 做一个CLI版的时间管理工具(二)
      • 做一个CLI版的时间管理工具(三)
      • 做一个CLI版的时间管理工具(四)
      • 做一个CLI版的时间管理工具(五)
      • 做一个CLI版的时间管理工具(六)
      • 做一个CLI版的时间管理工具(七)
      • 做一个CLI版的时间管理工具(八)
      • 做一个CLI版的时间管理工具(九)
    • 组装个支持记笔记的CodePen
    • ESCheck工具原理解析及增强实现
    • 一款检测代码中TODO的eslint插件
    • 实现一个Web UI检测(视觉走查)工具ing
    • 从0-1实现文件下载CLI工具
    • 内联JS处理(ES语法降级&内容压缩)
    • Node CLI工具原理解析
    • 我打造的在线简历生成应用
    • 助你轻松编写与分享snippet的VsCode插件
    • SourceMap解析CLI工具实现
    • 一个通过NPM包共(分)享代码块的解决方案
    • 实践:给女朋友个性化定制应用-体重记录(一)
    • 实践:给女朋友个性化定制应用-体重记录(二)
    • 实践:给女朋友个性化定制应用-体重记录(三)

做一个CL版的时间管理工具(四)

vuePress-theme-reco 粥里有勺糖    2018 - 2023

做一个CL版的时间管理工具(四)

粥里有勺糖 2021-08-05 技术笔记个人作品CLI工具

# 做一个CLI版的时间管理工具(四)

# 前言

上一篇文章主要阐述了:

  • 批量markdown转json逻辑
  • 合并多个md的中记录的内容,并按时间排序

本文将详细介绍的开发:

  • 初始化项目模板指令:timec init <projectName>
  • 初始化记录模板指令:timec create <filename>

# 功能开发

# 初始化模板项目

# 简述

用户输入简单的指令,就可以自动创建出一个时间管理模板工程

模板工程结构如下

project
├── README.md
├── study
|  └── README.md
└── work
   └── README.md
1
2
3
4
5
6

# 工作流程

  1. 终端输入指令
  2. 获取到指令执行目录(cmd)与用户输入的项目名称
  3. 利用existsSync判断目录是否存在
    1. 目录不存在的,利用fs.mkdirSync创建目录
  4. 通过fs.writeFileSync创建文件,将文件写入到用户的当前目录下
    1. 文件内容来源于指定静态资源目录(相对路径)

# 实现

注册init指令:

  1. 使用commander.commandAPI注册
  2. 从action回掉中拿到 设置的<projectName>参数
/**
 * 初始化项目
 */
commander.command("init <projectName>")
    .alias('i')
    .description('init project')
    .action((projectName) => {
        if (initProject(cwd, projectName)) {
            console.log(`初始化 ${projectName} 成功`);
            return
        }
        console.log(`${projectName} 已存在`);
    })
1
2
3
4
5
6
7
8
9
10
11
12
13

接下来是具体的initProject逻辑:

  • cmd:process.cwd()指令执行目录
  • projectName:用户输入的项目名
  1. 判断目标目录是否存在
    1. 不存在则创建
    2. 存在则抛出已经存在警告
  2. 将模板文件的内容先读入
  3. 通过createDir方法创建目录
  4. 通过createFile方法将内容写到目标目录
const path = require('path')
// 静态资源目录
const assetsDir = path.resolve(__dirname, 'assets')

const readmeContent = getFileContent(path.resolve(assetsDir, 'README.md'))
const demoContent = getFileContent(path.resolve(assetsDir, 'demo.md'))

/**
 * 初始化一个模板项目
 * @param {string} cwd 项目目录
 * @param {string} projectName 项目名称
 */
function initProject(cwd, projectName) {
    const dir = path.resolve(cwd, projectName)
    // 创建目录
    if (createDir(dir)) {
        createFile(path.resolve(dir, 'README.md'), readmeContent)

        createDir(path.resolve(dir, 'work'))
        createDir(path.resolve(dir, 'study'))

        createFile(path.resolve(dir, 'work', 'README.md'), demoContent)
        createFile(path.resolve(dir, 'study', 'README.md'), demoContent)
        return true
    }

    return false
}

/**
 * 创建一个不存在的目录
 * @param {string} path 
 */
function createDir(path) {
    if (!fs.existsSync(path)) {
        fs.mkdirSync(path, { recursive: true })
        return true
    }
    console.error(`${path} 已存在`);
    return false
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

这样初始化一个模板项目的流程就完成了

# 初始化记录模板

有模板项目就有模板文件

这部分主要阐述生成模板文件的流程

首先注册create <filename> 指令

/**
 * 创建一个时间记录模板文件
 */
commander.command("create <filename>")
    .alias('c')
    .description('create template note file')
    .action((filename) => {
        if (createTemplateFIle(cwd, filename)) {
            console.log(`${filename} 创建成功`);
            return
        }
        console.log(`${filename} 已存在`);
    })
1
2
3
4
5
6
7
8
9
10
11
12
13

主要逻辑是createTemplateFIle方法里

这里的思路就比较简单,因为创建模板文件的目录默认是指令命令的目录

一行代码就搞定文件的写出

/**
 * 初始化一个模板记录文件
 * @param {string} cwd 文件目录
 * @param {string} filename 文件名称
 */
function createTemplateFIle(cwd, filename) {
    return createFile(path.resolve(cwd, filename), demoContent)
}
1
2
3
4
5
6
7
8

# 本期效果

图片

# 其它

下一期根据已有的功能整个周报生成(鸽了一期)

由于每天空闲时间有限,本文就先到这

如果读者还感觉意犹未尽,敬请期待后续更新,或先关注一下仓库 (opens new window)

欢迎评论区提需求,交流探讨

本系列会不断的更新迭代,直至产品初代完成

  • 仓库地址 (opens new window)
Edit this page (opens new window)
Last Updated: 2022/5/15 12:46:34