TOP

node命令行工具之实现项目工程自动初始化的标准流程(一)
2019-09-17 16:41:02 】 浏览:17
Tags:node 命令 工具 实现 项目 工程 自动 初始 标准 流程

一、目的

传统的前端项目初始流程一般是这样:

传统流程

可以看出,传统的初始化步骤,花费的时间并不少。而且,人工操作的情况下,总有改漏的情况出现。这个缺点有时很致命。
甚至有马大哈,没有更新项目仓库地址,导致提交代码到旧仓库,这就很尴尬了。。。
基于这些情况,编写命令行工具(CLI)的目的就很明确:

  • 用于新项目工程的初始化
  • 利用工具进行初始化,可以节省项目初期的准备时间
  • 避免出现改漏的情况
  • 杜绝未更新项目版本仓库地址的问题

以下是新的流程示意图:

新的流程

二、自动化流程分析

以下是自动化流程图:

自动化流程分析

从流程图可以得出两个重要的信息:

  • 配置信息
  • 模板文件

命令行工具的角色,是负责将两个信息进行融合,提供一个交互平台给用户。

三、工具准备

3.1 配置信息工具

配置信息的获得,需要靠和用户进行交互。由于程序员一般是用终端输入命令进行项目操作。所以,这里选择了两个工具进行支撑。

  • commander

借鉴Ruby commander理念实现的命令行执行补全解决方案

commander可以接收命令行传入的参数

例子:

npg-cli --help

? ????  npm-package-cli ? ????
Usage: npg-cli [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information
  run testcli and edit the setting.
  • inquirer

常用交互式命令行用户界面的集合。

inquirer用询问式的语句,与用户进行交互,接收参数

例子:

npg-cli

? ????  npm-package-cli ? ????
Follow the prompts to complete the project configuration.

? project name test
? version 1.0.0
? description

3.2 模板信息工具

前端的java script 模板引擎,比如ejs,jade等。可以根据传入的参数,对模板标签进行替换,最终生成html。

如果把所有项目文件,不管文件后缀名,都看成是ejs模板,则可以在文件内容中使用ejs语法。
再根据配置信息进行替换,最终生成新文件。

其实,业界依据这个想法,已经有成熟的工具产生。

  • mem-fs

mem-fs是对文件进行读取,存入内存中。

  • mem-fs-editor

mem-fs-editor是对内存中的文件信息,使用ejs语法进行编译。最后调用commit方法输出最终文件。

3.3 提示信息工具

提示信息,除了console.log,还可以使用色彩更丰富的chalk
这样,可以输出更直观、友好的提示。

3.4 文件操作

文件操作,有业界成熟的shelljs
利用shelljs,可以在项目中简化以下步骤:

  • 一些项目文件,不需要修改,只用直接copy。可以使用shelljs.copySync同步方式生成。
  • 一些文件夹,需要提前构建,可以使用shelljs.mkdir进行创建

四、实现

以下按我做的开源项目——npm-package-cli的创作过程进行分拆、讲解。

4.1 初始化

新建项目文件夹npm-package-cli,并在该文件夹下运行npm init,生成package.json
项目结构如下:

 npm-package-cli
        |-- package.json

4.2 生成全局指令

这里要生成的全局指令是npg-cli

4.2.1 新建执行文件

新建文件夹bin,并在文件夹下新建名称为cli的shell脚本文件(注意:不能有后缀名)。
clishell脚本文件内容如下:

#!/usr/bin/env node

console.log('hello world');

其中,#!/usr/bin/env node是告诉编译器,以node的方式,运行代码。

并在package.json加入以下内容:

"bin": {
    "npg-cli": "bin/cli"
}

此时,项目结构如下:

 npm-package-cli
        |-- bin
            |-- cli
        |-- package.json

4.2.2 链接指令到全局

链接指令有两种方式:

  • npm link
  • npm install -g

两种方式,都需要在npm-package-cli文件夹下运行,才能生效。
作用是把npg-cli指令,指向全局的bin文件下,实现软链。

4.2.3 运行

在任意文件夹下运行命令:

npg-cli

# 输出
hello world

到这里,一个基本的指令就算完成了,接下来是指令的工作内容细化。

4.3 初始化操作类Creation

Creation的作用是整合所有操作,并提供接口给指令文件cli
Creation的结构如下:

class Creation{
  constructor(){
    // code
  }
  do(){
      // code
  }
  // other function
}

其中do方法暴露给脚本文件cli调用。

Creation类放在src/index.js中。

此时,项目结构如下:

 npm-package-cli
        |-- bin
            |-- cli
        |-- src
            |-- index.js
        |-- package.json

4.4 修改cli文件

#!/usr/bin/env node

const Creator = require('../src/index.js');

const project = new Creator();

project.do();

这样,只要实现好do方法,就可以完成npg-cli指令的运行了。

4.5 实现命令行参数读取

实现npg-cli --help,需要借助上文提到的工具commander
新建src/command.js文件,文件内容如下:

const commander = require('commander');
const chalk = require('chalk');

const packageJson = require('../package.json');
const log = console.log;

function initCommand(){
    commander.version(packageJson.version)
        .on('--help', ()=>{
            log(chalk.green('  run testcli and edit the setting.'));
        })
        .parse(process.argv);
}

module.exports = initCommand;

此时,项目结构如下:

 npm-package-cli
        |-- bin
            |-- cli
        |-- src
            |-- command.js
            |-- index.js
        |-- package.json

然后在Creation.do方法内执行initCommand()即可生效。

// src/index.js Creation
const initCommand = require('./command');

class Creation{
    // other code
    do(){
        in  
		
node命令行工具之实现项目工程自动初始化的标准流程(一) https://www.cppentry.com/bencandy.php?fid=107&id=254660

首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇es6学习笔记(二) 下一篇JavaScript数组方法大全(第一篇)