搭建一个nodejs脚手架的方法步骤


Posted in NodeJs onJune 28, 2019

1 前言

1.1

像我们熟悉的 vue-cli,taro-cli 等脚手架,只需要输入简单的命令 taro init project ,即可快速帮我们生成一个初始项目。在日常开发中,有一个脚手架工具可以用来提高工作效率。

1.2 为什么需要脚手架

  1. 减少重复性的工作,从零创建一个项目和文件。
  2. 根据交互动态生成项目结构和配置文件等。
  3. 多人协作更为方便,不需要把文件传来传去。

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内容如下

#!/usr/bin/env node

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 做如下修改

#!/usr/bin/env node

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文件如下

#!/usr/bin/env node
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 完整文件如下

#!/usr/bin/env node
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等,要想了解更多,就要深入了解,这里只是打开一扇门,学海无涯。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs win7下安装方法
May 24 NodeJs
nodejs教程之制作一个简单的文章发布系统
Nov 21 NodeJs
基于nodejs+express(4.x+)实现文件上传功能
Nov 23 NodeJs
Nodejs下DNS缓存问题浅析
Nov 16 NodeJs
Highcharts+NodeJS搭建数据可视化平台示例
Jan 01 NodeJs
Nodejs基于LRU算法实现的缓存处理操作示例
Mar 17 NodeJs
详解nodeJS之路径PATH模块
May 31 NodeJs
详解HTTPS 的原理和 NodeJS 的实现
Jul 04 NodeJs
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
Sep 19 NodeJs
基于nodejs实现微信支付功能
Dec 20 NodeJs
Nodejs实现的操作MongoDB数据库功能完整示例
Feb 02 NodeJs
nodejs中实现用户注册路由功能
May 20 NodeJs
独立部署小程序基于nodejs的服务器过程详解
Jun 24 #NodeJs
nodejs实现获取本地文件夹下图片信息功能示例
Jun 22 #NodeJs
NodeJs 模仿SIP话机注册的方法
Jun 21 #NodeJs
通过Nodejs搭建网站简单实现注册登录流程
Jun 14 #NodeJs
NodeJs生成sitemap站点地图的方法示例
Jun 11 #NodeJs
nodejs提示:cross-device link not permitted, rename错误的解决方法
Jun 10 #NodeJs
Nodejs异步流程框架async的方法
Jun 07 #NodeJs
You might like
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
js实现拖拽效果
2015/02/12 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
Vue中使用vux配置代码详解
2018/09/16 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
使用python实现baidu hi自动登录的代码
2013/02/10 Python
跟老齐学Python之编写类之二方法
2014/10/11 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python是什么 Python的用处
2020/05/26 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
从Pytorch模型pth文件中读取参数成numpy矩阵的操作
2021/03/04 Python
爱普生美国官网:Epson美国
2018/11/05 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
热能动力工程毕业生自荐信
2013/11/07 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
年度考核个人总结
2015/03/06 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫