搭建一个 nodejs 脚手架
· 正 · 文 · 来 · 啦 ·
1 前言
1.1
像我们熟悉的 vue-cli,taro-cli 等脚手架,只需要输入简单的命令 taro init project
,即可快速帮我们生成一个初始项目。在日常开发中,有一个脚手架工具可以用来提高工作效率。
1.2 为什么需要脚手架
减少重复性的工作,从零创建一个项目和文件。
根据交互动态生成项目结构和配置文件等。
多人协作更为方便,不需要把文件传来传去。
1.3 怎样来搭建呢?
脚手架是怎么样进行构建的呢,我是借助了 taro-cli 的思路。
1.4 本文的目标读者
1 想要学习更多和了解更多的人
2 对技术充满热情
2 搭建前准备
2.1 第三方工具
commander.js,可以自动的解析命令和参数,用于处理用户输入的命令。
download-git-repo,下载并提取 git 仓库,用于下载项目模板。
Inquirer.js,通用的命令行用户界面集合,用于和用户进行交互。
handlebars.js,模板引擎,将用户提交的信息动态填充到文件中。
ora,下载过程久的话,可以用于显示下载中的动画效果。
chalk,可以给终端的字体加上颜色。
log-symbols,可以在终端上显示出 √ 或 × 等的图标
2.2 上手
2.2.1 新建一个文件夹,然后npm init初始化
npm 不单单用来管理你的应用和网页的依赖,你还能用它来封装和分发新的 shell 命令。
$ mkdir lq-cli
$ npm init
这时在我们的 lq-cli
项目中有 package.json 文件,然后需要创建一个 JS 文件包含我们的脚本就取名 index.js 吧。package.json 内容如下
{"name": "lq-shell","version": "1.0.0","description": "脚手架搭建","main": "index.js","bin": {"lq": "./index.js"},"scripts": {"test": "test"},"keywords": ["cli"],"author": "prune","license": "ISC"
}
index.js内容如下
console.log('Hello, cli!');
到这一步就可以简单运行一下这个命令
npm link
lq
npm link 命令可以将一个任意位置的 npm 包链接到全局执行环境,从而在任意位置使用命令行都可以直接运行该 npm 包。控制台会输出Hello, cli!
2.2.2 捕获init之类的命令
前面的一个小节,可以跑一个命令行了,但是我们看到的 taro-cli 中还有一些命令,init初始化项目之类。这个时候 commander
就需要利用起来了。运行下面的这个命令将会把最新版的 commander 加入 package.json
npm install --save commander
引入 commander 我们将 index.js 做如下修改
console.log('Hello, cli!')const program = require('commander')
program.version(require('./package').version, '-v, --version').command('init <name>').action((name) => {console.log(name)})program.parse(process.argv)
可以通过 lq -v
来查看版本号 通过 lq init name
的操作,action里面会打印出name
2.2.3 对console的美工
我们看到taro init 命令里面会有一些颜色标识,就是因为引入了chalk这个包,同样和 commander 一样
npm install --save chalk
console.log(chalk.green('init创建'))
这样会输出一样绿色的
2.2.4 模板下载
download-git-repo 支持从 Github下载仓库,详细了解可以参考官方文档。
npm install --save download-git-repo
download() 第一个参数就是仓库地址,详细了解可以看官方文档
2.2.5 命令行的交互
命令行交互功能可以在用户执行 init 命令后,向用户提出问题,接收用户的输入并作出相应的处理。用 inquirer.js 来实现。
npm install --save inquirer
index.js文件如下
const chalk = require('chalk')
console.log('Hello, cli!')
console.log(chalk.green('init创建'))
const program = require('commander')
const download = require('download-git-repo')
const inquirer = require('inquirer')
program.version(require('./package').version, '-v, --version').command('init <name>').action((name) => {console.log(name)inquirer.prompt([{type: 'input',name: 'author',message: '请输入你的名字'}]).then((answers) => {console.log(answers.author)download('',name, {clone: true}, (err) => {console.log(err ? 'Error' : 'Success')})})})
program.parse(process.argv)
2.2.6 ora进度显示
npm install --save ora
相关命令可以如下
const ora = require('ora')
// 开始下载
const proce = ora('正在下载模板...')
proce.start()// 下载失败调用
proce.fail()// 下载成功调用
proce.succeed()
2.2.6 log-symbols 在信息前面加上 √ 或 × 等的图标
npm install --save log-symbols
相关命令可以如下
const chalk = require('chalk')
const symbols = require('log-symbols')
console.log(symbols.success, chalk.green('SUCCESS'))
console.log(symbols.error, chalk.red('FAIL'))
2.2.7 完整文件如下
const chalk = require('chalk')
console.log('Hello, cli!')
console.log(chalk.green('init创建'))
const fs = require('fs')
const program = require('commander')
const download = require('download-git-repo')
const inquirer = require('inquirer')
const ora = require('ora')
const symbols = require('log-symbols')
program.version(require('./package').version, '-v, --version').command('init <name>').action((name) => {console.log(name)inquirer.prompt([{type: 'input',name: 'author',message: '请输入你的名字'}]).then((answers) => {console.log(answers.author)const lqProcess = ora('正在创建...')lqProcess.start()download('github:/Mr-Prune/learn/mongodb-koa',name, {clone: true}, (err) => {if (err) {lqProcess.fail()console.log(symbols.error, chalk.red(err))} else {lqProcess.succeed()const fileName = `${name}/package.json`const meta = {name,author: answers.author}if(fs.existsSync(fileName)){const content = fs.readFileSync(fileName).toString();const result = handlebars.compile(content)(meta);fs.writeFileSync(fileName, result);}console.log(symbols.success, chalk.green('创建成gong'))}})})})
program.parse(process.argv)
总结
通过上面的例子只是能够搭建出一个简单的脚手架工具,其实bash还可以做很多东西,比如 npm 包优雅地处理标准输入、管理并行任务、监听文件、管道流、压缩、ssh、git等,要想了解更多,就要深入了解,这里只是打开一扇门,学海无涯。
热 文 推 荐
☞ Webpack 4 动态切割JS注入文件名
☞ 你在公司项目里面看过哪些操蛋的代码?
☞ CSS的一些你可能不知道的强大技巧
☞ 为什么视频网站的视频链接地址是blob?
☞ 传说中图片防盗链的爱恨情仇
你也“在看”吗?
搭建一个 nodejs 脚手架相关推荐
- 使用vue3 +vite + typeScript + elementPlus搭建一个项目脚手架
使用vue3 + vite + elementPlus搭建一个项目脚手架 这篇文章就教大家如何使用vue3+vite+ts+element-plus搭建一个项目,步骤详细,献给不爱看文档的诸位,希望这 ...
- 从0搭建vue3组件库: 如何完整搭建一个前端脚手架?
脚手架是为了保证各施工过程顺利进行而搭设的工作平台.按搭设的位置分为外脚手架.里脚手架:按材料不同可分为木脚手架.竹脚手架.钢管脚手架:按构造形式分为立杆式脚手架.桥式脚手架.门式脚手架.悬吊式脚手架 ...
- SSM整合(搭建一个Web脚手架)
文章目录 引入Maven依赖 Mybatis配置 Spring SpringMVC 集成三个配置文件 配置WEB Controller例子 SSM基础在这里了 MyBatis笔记(从零到一) Spri ...
- 前端工程师: 我用gup4.0搭建一个前端脚手架
冬至时节, 程序员加油! 本文将会介绍如何使用gulp4来搭建项目脚手架,如果您还在使用gulp3或更老的版本,您也以通过本文的一些思想将之前的项目进行完善,更新.如果gulp不是你们团队的重点,也可 ...
- 搭建一个nodejs项目 使用express
初始化项目 新建一个文件夹,运行 npm init 初始化项目 mkdir wqs_node cd wqs_node npm init 按照提示输入一些项目的相关信息 D:\web\node>c ...
- springboot项目结构_从零搭建Spring Boot脚手架(1):开篇以及技术选型
1. 前言 目前Spring Boot已经成为主流的Java Web开发框架,熟练掌握Spring Boot并能够根据业务来定制Spring Boot成为一个Java开发者的必备技巧,但是总是零零碎碎 ...
- 从零搭建Spring Boot脚手架:开篇以及技术选型1
1. 前言 目前Spring Boot已经成为主流的Java Web开发框架,熟练掌握Spring Boot并能够根据业务来定制Spring Boot成为一个Java开发者的必备技巧,但是总是零零碎碎 ...
- 前端如何搭建一个成熟的脚手架
前言 有了之前的基础(前端如何搭建一个简单的脚手架),我们现在可以讲讲一个成熟的脚手架是怎么做了. 这里我们参考vue-cli的源码,基于rollup和typescript一步步搭建.vue-cli作 ...
- Nodejs中搭建一个静态Web服务器,通过读取文件获取响应类型
场景 Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览器等Web客户端提供文档,也可以放置网站文件让全世界浏览,还可以放置数据文件,让全世界下载.目前最主流的Web服务 ...
- 用nodejs搭建一个简单的服务器
使用nodejs搭建一个简单的服务器 nodejs优点:性能高(读写文件) 数据操作能力强 官网:www.nodejs.org 验证是否安装成功:cmd命令行中输入node -v 如果显示版本号表示安 ...
最新文章
- nas挂载windows_在windows2012上挂载NAS文件系统
- Seafile 1.4 发布,文件同步和协作平台
- [YTU]_2613( 距离产生美)
- MySQL配置文件my.cnf中文详解
- 制作Geek风格的投影片
- 小程序点击调转带参数_带你走遍苏大的每个角落,校园导览小程序上线!
- 操作系统中死锁避免算法 --- 银行家算法
- php函数查询sprintf,PHPsprintf函数用例解析
- 5.7(财务应用程序:计算将来的程序)
- 关于opencv设置视频的属性无效问题
- java删除目录下符合条件的文件
- EF Core in Action 中文翻译 第一部分导航
- 【SORT系列】SIMPLE ONLINE AND REALTIME TRACKING
- 不用花钱,不用公网ip,用zerotier直接外网高速访问群晖,理论黑群晖白群晖都可以
- TI OSAL资料 整理
- 3. Vue入门实战教程之vue-element-admin初体验
- 搭建hexo个人网站小试
- 《权力的游戏》里,是谁活成了史诗?
- 天天向上的力量---python持续的力量
- oeasy教您玩转vim - 59 - # 编辑总结
热门文章
- 图像处理: 五种 插值法
- 配置静态路由使用下一跳IP地址和使用出接口的区别
- 小米路由器mini刷7620老毛子Padavan固件(支持私人云储存 aria2 QOS $$R等)
- 计算机win7卡顿如何解决方法,win7电脑出现卡顿怎么办_win7电脑卡顿严重解决方法...
- 企业支付宝账号注册认证流程
- 海军领域搜狗细胞词库
- MySQL中的alter table命令的基本使用方法及提速优化
- 苹果mac系统在文件栏添加文件夹的方法
- 数字孪生北京故宫,元宇宙推进旅游业进程
- ug服务器显示无效名称,文件名后缀怎么显示,ug打开文件时显示无效的文件名-