我奶奶看了都点赞的前端脚手架教程

一说起脚手架，你肯定会想到vue-cli。有些人看到vue-cli那个酷炫的功能和交互就会打退堂鼓。如果我告诉你，我们只需要具备nodejs基础就能写出vue-cli那样的功能来，你是不是稍微会兴奋点呢？接下来跟着我的步伐一点一点揭开脚手架的面纱吧。

准备工作

首先我们的电脑需要有nodejs开发环境，下载安装请点击这里(已有环境请省略)：nodejs； cmd输入node -v,出现下图版本号即安装成功。

开发步骤

初始化项目

npm init初始化一个项目；初始化成功之后会根据输入的配置生成一个package.json文件：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
} 复制代码

添加脚手架命令和命令入口文件（test）

脚手架命令：在package.json中添加bin配置来指定自己定义的命令对应的可执行文件的位置，代码如下：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "bin": {
    "test": "bin/test.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
} 复制代码

命令入口文件：根据package.json中的bin配置，我们在项目根目录下新增bin文件夹，并且在该文件夹下新建·test.js，代码如下：

#!/usr/bin/env node
console.log('test') 复制代码

第一行是必须添加的，是指定这里用node解析这个脚本。默认找/usr/bin目录下，如果找不到去系统环境变量查找。

这时我们cmd输入test命令，你会发现报错了： 为什么找不到test命令呢？让我们先来理解下为啥我们安装了vue-cli之后，输入vue就不报错呢？带着疑问打开我们npm全局安装的文件目录： 请留意上图红色的地方，我们会发现我们熟悉的老朋友也在里头：cnpm,vue。这里我们先留下悬念，先回到刚才的脚手架项目。

link到全局：项目根目录下执行如下命令npm link，执行成功之后我们再查看我们全局npm的目录，这个时候我们会发现，多了几个项，细心地你肯定会发现，多出来的文件命名就是我们在package.json中配置的bin键： 

这个时候我们再次打开cmd输入test试下：

对比上面失败的效果，你会发现这次系统识别了test命令，而且控制台输出了test。到这里上面的疑问应该都解开了：执行npm link，将当前的代码在npm全局目录下留个快捷方式，npm检测到package.json里面存在一个bin字段，它就同时在全局npm包目录下生成了一个可执行文件：

1. npm link，链接到全局
2. bin配合npm link，生成命令文件
3. "test": "bin/test.js"，cmd执行test，根据配置会去执行bin/test.js这个文件

添加命令

别人脚手架有的功能，我们也得有，例如：-V(--version) -H(--help)等。

commander

首先我们先安装下需要的commander库，然后为我们的test命令添加最基础的版本号查看命令:

#!/usr/bin/env node
const program = require('commander')
program
	.version(`version is ${require('../package.json').version}`)
	.parse(process.argv) 复制代码

这里需要注意的是末尾的.parse(process.argv)的代码不能丢，如果没有则解析不了我们输入的参数，效果如下：

 

此外还可以添加.description .usage .option .action .command等；下面我们来重点说下.command和.action方法：其中，command允许我们注册一个命令（类似于vue create）

作者：罗哥哥
链接：https://juejin.cn/post/6911987404039520270
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。