原因

在工作中,需要开发一个脚手架,用于给相关用户提供相关的开发便利性。

适合人群

对前端、Node 操作有一定的了解,同时想了解脚手架开发过程或者需要自己实现一个脚手架的开发者。

目标

  1. 开发一个简单的脚手架,能够提供给用户进行安装。
  2. 能够输出相关提示。
  3. 对用户文件进行读写操作。
  4. 在脚手架中使用 Shell 脚本。

步骤

开发脚手架

脚手架的开发最开始过程与普通的前端项目相同,需要一个入口文件 command.js 和配置文件 package.json

与其他配置文件不同的是,你需要在 command.js 文件第一行增加如下声明:

#! /usr/bin/env node
复制代码

同时需要在 package.json 文件中加上一下一项:

{...,"bin": {"cm-cli": "command.js"}
}
复制代码

在配置文件中增加了此项后,只需要在配置文件根目录下执行 npm link 命令,即可使用 cm-cli --help 命令来查看加载的 cm-cli 脚手架(需要保证 command.js 能够处理响应,详情见下一节,放在此处是为了文章方便阅读)。

如果你发布了你的脚手架,那么在其他用户使用命令 npm install -g cm-cli 之后,便可以在全局下使用你的脚手架了。

对用户进行提示

在对注释和命令进行提示中,我们需要使用到 commander 包,使用 npm install commander 即可进行安装。(如果NPM版本低于5,则需要添加 --save 参数保证更新 package.json 配置文件)。

commander 是一个提供用户命令行输入和参数解析的强大功能。有需要的可以阅读相关的库文档。在这里我介绍两个用的最多的方法。

option

能够初始化自定义的参数对象,设置关键字和描述,同时还可以设置读取用户输入的参数。具体用法如下:

const commander = require('commander');commander.version('1.0.0').option('-a, --aaa', 'aaaaa').option('-b, --bbb', 'bbbbb').option('-c, --ccc [name]', 'ccccc').parse(process.argv);if (commander.aaa) {console.log('aaa');
}if (commander.bbb) {console.log('bbb');
}if (commander.ccc) {console.log('ccc', commander.ccc);
}
复制代码

此时如果已经配置完成并且执行过 npm link 命令后,可以看到如下结果:

command

该方法能够在命令行增加一个命令。用户在执行此命令后,能够执行回调中的逻辑。具体用法如下:

commander.command('init <extensionId>').description('init extension project').action((extensionId) => {console.log(`init Extension Project "${extensionId}"`);// todo something you need});
复制代码

具体展示效果如下:

对用户文件进行读写操作

通过上面的步骤,我们已经能够完成一个简单的脚手架了。下面,我们需要读取用户配置,同时为用户生成一些模板文件。

读取文件

现在,我们需要读取用户的 cm-cli.json 配置文件来进行一些配置。

我们可以使用 Node.js 的 fs 文件模块来对文件进度读操作,由于此处没有太多难点,因此略去。

写入文件模板

我们提前将模板文件存储在 CDN 上,再根据本地读取到的相关脚手架配置文件来进行模板的下载。

注:脚手架中读取的路径为使用者使用时当前路径,因此没有办法将模板文件存储在脚手架中进行读取。

我们可以使用诸如 request 这种库来帮助我们进行文件下载,简化操作步骤。执行 npm install request 即可进行安装。

注:在文件写入时建议先判断文件是否存在,再进行覆盖。

使用 Shell 脚本

与 Node.js 提供的 API 函数来看,有些人更加倾向于使用 Shell 脚本来进行文件操作。幸运的是,我们也可以在我们的脚手架中引入 node-cmd 来启用对 Shell 脚本的支持。执行 npm install node-cmd 即可进行安装。

具体示例如下:

commander.command('init <extensionId>').description('init extension project').action((extensionId) => {id = extensionId;console.log(`init Extension Project "${extensionId}"`);cmd.get(`mkdir -p static/${extensionId}mkdir tmpmkdir tmp/source-filemkdir tmp/build-filecurl -o tmp/source-file/index.js https://xxxxxxxx.com?filename=index.jstouch tmp/source-file/index.csscurl -o tmp/build-file/server.js https://xxxxxxxx.com?filename=server.jscurl -o tmp/build-file/router.js https://xxxxxxxx.com?filename=router.jscurl -o tmp/build-file/package.json https://xxxxxxxx.com?filename=package.jsoncp  tmp/source-file/* static/${extensionId}cp tmp/build-file/* ./rm -fr tmpnpm install`,(err, data) => {console.log(data)if (!err) {console.log('init success');return;}console.error('init error');});});
复制代码

我们可以快速的使用 Shell 脚本来进行文件夹的创建和文件模板的下载。

总结

脚手架想要在终端能够快速执行,可以在 package.json 配置文件中增加相关字段。

脚手架需要能够读取相关终端输入,可以使用 commander 库来快速开发。

脚手架需要能够执行 Shell 脚本,可以使用 node-cmd 库来快速实现需求。

如何开发一个Node脚手架相关推荐

  1. 如何开发一个项目脚手架

    创建一个项目通常需要依赖很多的二/三方组件,我们很难记住每个组件的maven坐标,并且有些组件的初始化工作很繁琐,一堆配置项很难记住.如果没有脚手架,每当需要创建一个新的project,我们通常会选择 ...

  2. 怎样开发一个 Node.js 命令行工具包

    大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列> ...

  3. idea 制作maven脚手架_开发一个maven脚手架

    写在前面 开发新项目就需要搭建新工程,但是搭建新工程的这个过程是非常繁琐浪费时间的,并且不可避免的需要踩坑.更可怕的是,如果是在一个团队中,每新起一个项目都由不同的开发人员去自定义的搭建工程结构,那么 ...

  4. 带你开发一个完整的 node.js 项目

    「他们根本不知道,现在的电商大促有多么依赖 Node.js」任职阿里的架构师朋友这么说. 说真的,我倒并不意外.作为一个定位明确的高性能 Web 服务器,Node.js 非常火热,几乎霸占了前端生态. ...

  5. 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(一)

    这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...

  6. 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)

    前篇 使用React.Node.js.MongoDB.Socket.IO开发一个角色投票应用的学习过程(一) 使用React.Node.js.MongoDB.Socket.IO开发一个角色投票应用的学 ...

  7. Vue.js+Node.js爬虫开发一个Github排行榜

    前言 之前使用Node.js开发一个小爬虫,算是初步对爬虫有了一定的了解,但爬取的数据没什么意义.最近使用Github的频率比较高,所以准备爬取一些Github的数据玩下.目前爬取了中国区follow ...

  8. Nodejs开发简单的脚手架工具

    脚手架,这个名词对于作为前端的我们来说,也许并不陌生吧,像vue-cli,react-native-cli等,全局安装后,只需要在命令行中敲入一个简单的命令,便可帮我们快速的生成一个初始项目,如vue ...

  9. 教你用webpack搭一个vue脚手架[超详细讲解和注释!]

    1.适用人群 1.对webpack知识有一定了解但不熟悉的同学.2.女同学!!!(233333....) 2.目的 在自己对webpack有进一步了解的同时,也希望能帮到一些刚接触webpack的同学 ...

最新文章

  1. 树莓派进阶之路 (009) - 树莓派ftp脚本(原创)
  2. c打印char* 数据_JAVA基础篇(数据类型)
  3. Linux 学习笔记之超详细基础linux命令 Part 3
  4. Tensorflow1.x 和 2.x如何读取ckpt中保存了那些参数
  5. spring dao层注解_Spring– DAO和服务层
  6. vue cli vue 3.x
  7. Intel Haswell/Broadwell架构/微架构/流水线 (6)-Unlamination微指令离解过程
  8. 批量文件转换:PDG转PDF并合并
  9. ASP.NET删除服务器端文件,asp.net删除服务器文件
  10. windows清理_一个Windows系统下好用的内存清理工具
  11. ISP Pipeline AWB
  12. 从mysql迁移数据到postgre
  13. 微信 android 闪退问题怎么解决方法,安卓微信闪退怎么办,教你三种方法快速解决...
  14. 遗传算法(Genetic Algorithm)解析
  15. python格式化输出(二)--字符串的格式化输出
  16. 【Neuralink 与大脑的神奇未来】Part 2:大脑
  17. 联想拯救者y空间_锐龙H真给劲儿 联想拯救者R7000 2020首测
  18. Python 29 描述符
  19. Java WEB开发须知知识点---概况篇
  20. 对rtthread系统的理解

热门文章

  1. 你要偷偷学会排查线上 CPU 飙高的问题,然后惊艳所有人!
  2. 面试常考,项目易错,长文详解C/C++中的字节对齐
  3. 王者荣耀活动精选 Blink 第二弹来袭!
  4. 吃透这套架构体系,三年成为架构师!
  5. 2016年第七届蓝桥杯决赛Java本科B组试题解析
  6. 取存储过程output的取
  7. Oracle NoLogging Append 方式减少批量insert的redo_size
  8. webpack学习笔记
  9. 聊聊 iOS 中的网络加密
  10. 十五天精通WCF——第七天 Close和Abort到底该怎么用才对得起观众