搭建一个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的require模块(文件模块/核心模块)及路径介绍
Jan 14 NodeJs
nodejs 实现模拟form表单上传文件
Jul 14 NodeJs
NodeJS学习笔记之(Url,QueryString,Path)模块
Jan 13 NodeJs
Nodejs关于gzip/deflate压缩详解
Mar 04 NodeJs
使用NodeJs 开发微信公众号(三)微信事件交互实例
Mar 02 NodeJs
详解nodejs 文本操作模块-fs模块(五)
Dec 23 NodeJs
详谈Angular路由与Nodejs路由的区别
Mar 05 NodeJs
nodeJS微信分享
Dec 20 NodeJs
nodejs初始化init的示例代码
Oct 10 NodeJs
Nodejs对postgresql基本操作的封装方法
Feb 20 NodeJs
nodejs开发一个最简单的web服务器实例讲解
Jan 02 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扩展开发经验分享
2012/09/06 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
php缓冲输出实例分析
2015/01/05 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
Python常用列表数据结构小结
2014/08/06 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Django中处理出错页面的方法
2015/07/15 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
学校门卫工作职责
2013/12/07 职场文书
汉语言文学职业规划
2014/02/14 职场文书
小学评语大全
2014/04/22 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
安全教育第一课观后感
2015/06/17 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书