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

 更新时间:2019年06月28日 14:35:57   作者:Rick_Lee  
这篇文章主要介绍了如何搭建一个nodejs脚手架的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

相关文章

  • Node.js  事件循环详解及实例

    Node.js 事件循环详解及实例

    这篇文章主要介绍了 Node.js 事件循环详解及实例的相关资料,Node.js 有多个内置的事件,我们可以通过引入 events 模块,并通过实例化 EventEmitter 类来绑定和监听事件,需要的朋友可以参考下
    2017-08-08
  • node.js中事件触发器events的使用方法实例分析

    node.js中事件触发器events的使用方法实例分析

    这篇文章主要介绍了node.js中事件触发器events的使用方法,结合实例形式分析了node.js事件触发器events的功能、原理及基本使用方法,需要的朋友可以参考下
    2019-11-11
  • 关于nodejs和npm版本不匹配的解决方法

    关于nodejs和npm版本不匹配的解决方法

    在运行npm命令时总会出现如下报错,npm dose not support Node.js v12.18.0,发现是node版本和npm版本不匹配造成的,所以本文给大家介绍了关于nodejs和npm版本不匹配的解决方法,需要的朋友可以参考下
    2023-11-11
  • Node.js中的异步生成器与异步迭代详解

    Node.js中的异步生成器与异步迭代详解

    这篇文章主要给大家介绍了关于Node.js中异步生成器与异步迭代的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 使用Node.js实现ORM的一种思路详解(图文)

    使用Node.js实现ORM的一种思路详解(图文)

    这篇文章主要介绍了用Node.js实现ORM的一种思路详解(图文),需要的朋友可以参考下
    2017-10-10
  • Puppet的一些技巧

    Puppet的一些技巧

    puppet这个工具真的很神奇,先不说商业版有哪些黑科技,单是开源版本就有很多可能让你摸不着头脑的地方,下面来列举一下puppet是怎么查找puppet server的
    2018-09-09
  • Node.js web 应用如何封装到Docker容器中

    Node.js web 应用如何封装到Docker容器中

    这篇文章主要介绍了Node.js web 应用如何封装到Docker容器中,帮助大家更好的学习node.js和使用docker容器,感兴趣的朋友可以了解下
    2020-09-09
  • nodejs开发——express路由与中间件

    nodejs开发——express路由与中间件

    本篇文章主要介绍了nodejs开发——express路由与中间件 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • nodejs如何将多个目录文件合并成一个

    nodejs如何将多个目录文件合并成一个

    这篇文章主要介绍了nodejs如何将多个目录文件合并成一个问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • node.js使用http模块创建服务器和客户端完整示例

    node.js使用http模块创建服务器和客户端完整示例

    这篇文章主要介绍了node.js使用http模块创建服务器和客户端,结合完整示例形式分析了node.js基于http模块实现客户端与服务器端交互的相关操作技巧,需要的朋友可以参考下
    2020-02-02

最新评论