随着前端技术的发展,工程化逐渐成为了一种趋势。但在实际开发时,搭建项目是一件很繁琐的事情,尤其是在对一个框架的用法还不熟悉的时候。于是很多框架都自带一套脚手架工具,在初始化前端项目的时候就可以不用自己从头搭建,只要在命令行输入初始化命令即可。

那么,如果想自行开发出这样一个命令行工具来初始化自定义项目,该怎么做呢?研究的过程中,偶然间发现了 commander.js 这个模块,可以帮助命令行工具的开发。于是边研究边整理了这篇笔记。

一、commander.js的基本用法
1. 安装

mkdir commander-example && cd commander-example
npm install commander --save

2. 使用

新建一个bin目录,然后在该目录下新建一个test.js文件,文件内容:

// 引入依赖
var program = require('commander'); // 定义版本和参数选项
program
.version('0.1.0', '-v, --version')
.option('-i, --init', 'init something')
.option('-g, --generate', 'generate something')
.option('-r, --remove', 'remove something'); // 必须在.parse()之前,因为node的emit()是即时的
program.on('--help', function(){
console.log(' Examples:');
console.log('');
console.log(' this is an example');
console.log('');
}); program.parse(process.argv); if(program.init) {
console.log('init something')
} if(program.generate) {
console.log('generate something')
} if(program.remove) {
console.log('remove something')
}

然后在命令行里输入测试:

node bin\test --help

得到如下结果:

Usage: test [options]

  Options:

    -v, --version   output the version number
-i, --init init something
-g, --generate generate something
-r, --remove remove something
-h, --help output usage information
Examples:

3. API解析

· version

作用:定义命令程序的版本号
用法示例:.version('0.0.1', '-v, --version')
参数解析:
① 版本号<必须>

② 自定义标志<可省略>:默认为 -V 和 --version

· option

作用:用于定义命令选项
用法示例:.option('-n, --name<path>', 'name description', 'default name')
参数解析:
① 自定义标志<必须>:分为长短标识,中间用逗号、竖线或者空格分割;标志后面可跟必须参数或可选参数,前者用 <> 包含,后者用 [] 包含
② 选项描述<省略不报错>:在使用 --help 命令时显示标志描述

③ 默认值<可省略>

· command

作用:添加命令名称
用法示例:.command('rmdir <dir> [otherDirs...]', 'install description', opts)
参数解析:
① 命令名称<必须>:命令后面可跟用 <> 或 [] 包含的参数;命令的最后一个参数可以是可变的,像实例中那样在数组后面加入 ... 标志;在命令后面传入的参数会被传入到 action 的回调函数以及 program.args 数组中
② 命令描述<可省略>:如果存在,且没有显示调用action(fn),就会启动子命令程序,否则会报错

③ 配置选项<可省略>:可配置noHelp、isDefault等

· description

作用:定义命令的描述

用法示例:.description('rmdir desc')

· action

作用:定义命令的回调函数

用法示例:.action(fn)

· parse

作用:用于解析process.argv,设置options以及触发commands
用法示例:.parse(process.argv)

二、使用commander.js开发本地模块init-commander-tool
1. 新建目录如下:

init-commander-tool
|-bin
|-init-project.js
|-lib
|-install.js
|-templates

2. 运行 npm init 来初始化项目,项目名称设置为init-commander-tool,并安装依赖包:

```

"devDependencies": {
"chalk": "^2.4.1",
"commander": "^2.15.1",
"fs-extra": "^6.0.1",
"path": "^0.12.7",
"through2": "^2.0.3",
"vinyl-fs": "^3.0.3",
"which": "^1.3.1"
} ```
npm init
npm install

3. init-porject.js中代码如下

// 指定脚本的执行程序
#! /usr/bin/env node // 引入依赖
var program = require('commander');
var vfs = require('vinyl-fs');
var through = require('through2');
const chalk = require('chalk');
const fs = require('fs-extra');
const path = require('path'); // 定义版本号以及命令选项
program
.version('1.0.0')
.option('-i --init [name]', 'init a project', 'myFirstProject') program.parse(process.argv); if(program.init) {
// 获取将要构建的项目根目录
var projectPath = path.resolve(program.init);
// 获取将要构建的的项目名称
var projectName = path.basename(projectPath); console.log(`Start to init a project in ${chalk.green(projectPath)}`); // 根据将要构建的项目名称创建文件夹
fs.ensureDirSync(projectName); // 获取本地模块下的demo1目录
var cwd = path.join(__dirname, '../templates/demo1'); // 从demo1目录中读取除node_modules目录下的所有文件并筛选处理
vfs.src(['**/*', '!node_modules/**/*'], {cwd: cwd, dot: true})
.pipe(through.obj(function(file, enc, callback){
if(!file.stat.isFile()) {
return callback();
} this.push(file);
return callback();
}))
// 将从demo1目录下读取的文件流写入到之前创建的文件夹中
.pipe(vfs.dest(projectPath))
.on('end', function() {
console.log('Installing packages...') // 将node工作目录更改成构建的项目根目录下
process.chdir(projectPath); // 执行安装命令
require('../lib/install');
})
.resume();
}

· #! /usr/bin/env node

指定脚本的执行程序,这里是node。也可以用!/usr/bin/node,但如果用户将node安装在非默认路径下,会找不到node。所以最好选择用env(包含环境变量)来查找node安装目录。

· vinyl-fs:

Vinyl用于描述文件的元数据对象;该模块主要暴露了两个方法src和dest,它们各自返回数据流;不同的是前者提供Vinyl对象,后者使用Vinyl对象;简单的说就是一个读取文件,另一个往磁盘写文件

param@src:src(globs[, options])

第一个参数为字符串或字符串数组,表明文件位置。如果是数组,则会按照从前到后的顺序来执行,但带有!(非)符号的路径应该放在后面。第二个参数为选项对象,查看具体配置

param@dest:dest(folder[, options])

第一个参数为文件夹路径或函数,如果是后者,则它会被用于处理每一个Vinyl文件对象,且该函数必须返回一个文件夹路径。第二个参数为选项对象,查看具体配置。该方法返回文件对象流,并将他们写入磁盘以及传递到管道下游,所以你可以继续在管道中进行操作。如果文件拥有symlink属性,就会创建一个符号链接。

· through2:

through2主要是对node中streams.Transform的简单封装,让其使用起来更加简单。具体用法可查看through2**

4. install.js中代码如下:

// 引入依赖
var which = require('which');
const chalk = require('chalk'); var childProcess = require('child_process'); // 开启子进程来执行npm install命令
function runCmd(cmd, args, fn) {
args = args || [];
var runner = childProcess.spawn(cmd, args, {
stdio: 'inherit'
}); runner.on('close', function(code) {
if(fn) {
fn(code);
}
})
} // 查找系统中用于安装依赖包的命令
function findNpm() {
var npms = ['tnpm', 'cnpm', 'npm'];
for(var i = 0; i < npms.length; i++) {
try {
// 查找环境变量下指定的可执行文件的第一个实例
which.sync(npms[i]);
console.log('use npm: ' + npms[i]);
return npms[i]
}catch(e) {
}
}
throw new Error(chalk.red('please install npm'));
} var npm = findNpm();
runCmd(which.sync(npm), ['install'], function() {
console.log(npm + ' install end');
})

三、构建项目demo
此demo用于初始化项目副本,因此可以根据自己的需要构建。我们可以利用一些脚手架工具来初始化项目,也可以自己一步步搭建。

将搭建的项目复制进templates目录下(node_modules下的文件及文件夹可以不用复制),并重命名为demo1;然后在init-commander-tool目录下运行 node bin\init-project --help 测试所有命令是否能正常显示。

四、全局使用
在package.json里面添加bin字段:

// bin项用来指定各个内部命令对应的可执行文件的位置
"bin": {
"initP": "./bin/init-project"
},

然后在init-commander-tool目录下运行 npm link,将本地模块链接到全局环境下,这样就可以在任何地方使用initP命令了。
在命令行中键入:initP --help,出现以下内容则代表可以正常使用。

Usage: init-project [options]

  Options:

    -V, --version     output the version number
-i --init [name] init a project (default: myFirstProject)
-h, --help output usage information

最后在需要初始化项目的地方运行 initP --init myProject 即可,项目名称可以自己定义。

用commander.js构建自己的脚手架工具的更多相关文章

  1. commander.js 制作简易的 MINA CLI 脚手架

    出发点并不是小程序本身,是想要做一个脚手架(command-line interface),看过 VUE / REACT 脚手架,觉得很厉害,但是并不太知道里面是怎么做成的,所以最近研究了研究,看能不 ...

  2. 【AMAD】cookiecutter-django -- 是一个构建Django项目的脚手架工具

    动机 简介 个人评分 动机 Django内置的命令django-admin startproject其实并不好用,在你上线之前八成已经把它改的面目全非了. 简介 cookiecutter-django ...

  3. 【vue系列之一】使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...

  4. 1.1.1 vue-cli脚手架工具

    参考文档: windows下npm安装vue(以下教程大部分都是参考这篇博客的,按照着这篇博客自己实现了一遍) npm安装vue-cli脚手架 一.前言 npm:nodejs下的包管理器,安装好nod ...

  5. Vue.js 相关知识(脚手架)

    1. vue-cli 简介 Vue-cli 是 vue的设计者,为提升开发效率而提供的一个脚手架工具,可通过vue-cli快速构造项目结构 2. vue-cli 安装步骤 安装npm 或 cnpm n ...

  6. 使用vue脚手架工具搭建vue-webpack项目

    对于Vue.js来说,如果你想要快速开始,那么只需要在你的html中引入一个<script>标签,加上CDN的地址即可.但是,这并不算是一个完整的vue实际应用.在实际应用中,我们必须要一 ...

  7. Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)

    在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...

  8. 用vue快速开发app的脚手架工具

    前言 多页面应用于结构较于简单的页面,因为简答的页面使用router又过于麻烦.本脚手架出于这样的场景被开发出来. 使用脚手架搭配Hbuilder也同样可以快速使用vue开发安卓和IOS APP. 本 ...

  9. 使用webpack+vue.js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

随机推荐

  1. C#核心基础--类的继承

    继承 一个类可以继承自另一个类.在 C#中,类与类之间只存在单一继承.也就是说,一个类的直接基类只能有一个.当类与类之间实现继承的时候,子类可以将它的直接基类的所有成员当做自己的成员,除了类的静态构造 ...

  2. Not Found woff 字体库

    原因是,默认在IIS上是没有添加对*.woff,*.svg文件的Mime类型,因此在客户端请求此类文件时得到的都是404. 所以我们只需要在我们对应网站下的Mime类型中添加文件对应的类型就行了 .w ...

  3. SQLSERVER查询数据库死锁的存储过程

    USE [IdentityDemo] GO /****** Object: StoredProcedure [dbo].[sp_who_lock] Script Date: 2019/1/17 10: ...

  4. .gho文件检查

    虽然目前windows10的接受程度越来越广泛,但我接触到的一些非IT人士还是钟爱于windows7系统,本文记录一下在使用ghost还原系统遇到的问题. gho还原失败 在还原ghost系统过程中, ...

  5. puppet 和 apache passenger的配置

    目录 1. 概要 2. apache passenger 安装测试 2.1. 什么是 apache passenger 2.2. 安装 apache passenger 2.3. 配置 apache ...

  6. 转:Java中的String,StringBuilder,StringBuffer三者的区别

    最近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下, ...

  7. Spark1.0.0 源码编译和部署包生成

    问题导读:1.如何对Spark1.0.0源码编译?2.如何生成Spark1.0的部署包?3.如何获取包资源? Spark1.0.0的源码编译和部署包生成,其本质只有两种:Maven和SBT,只不过针对 ...

  8. RMQ 字符串 F. Strings and Queries

    F. Strings and Queries time limit per test 2.5 s memory limit per test 256 MB input standard input o ...

  9. 使用IntelliJ IDEA和Maven管理搭建Web开发环境(以Spring MVC为例)(二)

    前言:在使用IntelliJ IDEA和Maven管理搭建Web开发环境(以Spring MVC为例)(一)中已经介绍了如何对web基础环境进行搭建,这里主要演示,如何对spring环境进行搭建,然后 ...

  10. 采用BitMap从20亿个int正整数中找出相同的数字

    所谓的BitMap就是用一个bit位来标记某个元素所对应的value,而key即是该元素,由于BitMap使用了bit位来存储数据,因此可以大大节省存储空间. public class Test { ...