脚手架开发流程

  1. 创建npm项目

  2. 创建脚手架入口文件,在文件最上方添加:

#!/usr/bin/env node
  1. 配置package.json,添加bin属性

  2. 编写脚手架代码

  3. 将脚手架发布到npm

按照上面的流程脚手架就开发完成了,使用也很简单,只需要使用npm安装,运行就可以了。

脚手架开发的过程中通常会把一些复杂的系统拆分成若干个模块也就是分包,这是脚手架开发过程中的一个难点。第二个难点是如何对命令进行注册并且将命令执行到对应的方法上面。第三个难点是参数解析。

参数一般是

vue command [options] <params>

options全称: --version, --help
options简称: -V, -h
带params的options: --path /Users/yindong/Desktop/test

第四个难点就是帮助文档,他告诉用户脚手架如何进行使用。书写起来相当复杂。

最后脚手架开发起来还会有很多内容,比如命令行交互,日志打印,命令行文字变色,网络通信,文件处理等等。

创建一个简单的脚手架

mkdir yd-test
cd yd-test/
npm init -y
touch ./bin/index.js

bin/index.js

#!/usr/bin/env node

console.log('welcom yd test');

在package.json中新增bin,并且制定命令yd-test到bin/index.js文件。

"bin": {
    "yd-test": "bin/index.js"
}

这样我们一个简单的命令就配置好了,当我们执行yd-test命令的时候就会执行bin/index.js文件中的代码。我们需要将这个脚手架发布到npm上,然后使用全局安装命令来安装之后才可以使用。

本地调试

如果你觉得发布到npm再进行安装太过麻烦,尤其需要本地调试脚手架的时候,开发者更新网的时候可以事实更新。

npm link

可以使用link命令将脚手架link到node的全局目录,同时指向node_modules中,效果和我们全局安装是一样的。

除了link命令我们还可以使用npm install -g命令来实现。只需要在脚手架的父级文件夹中运行全局安装命令就会形成一个软连。

如果分包的情况下也可以使用link来引用分包的内容。npm link 包名。

总结一下:

链接本地脚手架:

cd cli-dir
npm link

链接本地库文件

cd lib-dir
npm link
cd cli-dir
npm link lib

取消链接本地库文件

cd lib-dir
npm unlink
cd cli-dir
npm unlink lib

npm link name是将当前项目中的node_modules下制定的库文件连接到node全局node_modules下的库文件。

npm link是将当前项目连接到node全局node_modules中作为一个库文件,并解析bin配置创建可执行文件。

npm unlink是将当前项目从node全局node_modules中移除

npm unlink name是将当前项目中的库文件依赖移除。

命令注册

在node中存在一个process内置库,可以获取到我们执行命令中的命令符。

bin/index.js

#!/usr/bin/env node

const argv = require('process').argv;
const command = argv[2];
console.log(command);
// 空格分隔的字符串都会作为元素添加到argv中。
const [option, param] = options = argv.slice(3);
console.log(option, param);

实际的情况要复杂的多,实际工作中用户可能同时输入多个命令,并且命令可能存在参数或者可输入的,这样处理起来就会比较复杂,多数情况下我们会使用第三方库来解决这些问题。如果自己来写的话需要花费大量的时间。

转载须知

如转载必须标明文章出处文章名称文章作者,格式如下:

转自:【致前端 - https://madaozhijian.com】 前端脚手架开发  "隐冬"