如何手写一个专属于自己的脚手架

开场诗

-爆竹声中一岁除，

• 春风送暖入屠苏。

• 千门万户曈曈日，

• 总把新桃换旧符。

一、序言

大家好，这里是流光的频道，又到了和大家分享的时间，最近在公司接触了我们公司自己开发的脚手架对此兴趣非常浓厚，因此我有一个想法怎么能开发一个属于自己的脚手架呢，通过学习后发现打造一个自己的脚手架也没有那么难，接下来让我们一步一步的打造一个专属于自己的脚手架。

二.前期准备

1.安装Node

1.先确保自己本地已经安装了Node,没有安装的话可以通过这个地址安装Node.js (nodejs.org)可以通过node -v查看自己node版本如下图所示：

2.当你安装node的时候npm也是自动安装的，也可npm -v可以查看版本号，如图所示：

2.初始化一个本地文件

1.创建一个文件夹，通过命令行执行npm init -y初始化一个文件，同时在根部录下创建一个bin文件夹（名字可以自取），再在里面创建一个index.js的文件，文件内容可以自行编写，但是注意在文件最上面加上 #!/usr/bin/env node这样它就可以被node识别作为运行。

3.测试运行

1.通过使用node ./bin/index.js可以直接运行你的文件如下图所示：

2.通过在package.json文件配置 "bin": "/bin/index.js"，然后运行npm link，就可以像运行npm install react一样在本地形成一个包，来进行调试为以后的推到npm的平台做好基础。直接输入你package.json的name的值就可以直接运行如下图所示我的name为Zc-cli-01：

三、常用开发库介绍

1.cmmander

写代码来描述你的命令行界面。 Commander 负责将参数解析为选项和命令参数，为问题显示使用错误，并实现一个有帮助的系统。详细的使用地址为：github.com/tj/commande... index.js的基础代码配置为下

const { program } = require("commander"); //引入commander
program.name("Zc-cli-01").usage("<command>  [option]"); //配置包的名字和他的一些配置项
program                                  
  .option("-d, --debug", "output extra debugging")
  .option("-s, --small", "small pizza size")
  .option("-p, --pizza-type <type>", "flavour of pizza"); //配置基础命令向上面的node -v一样<type>是提示当你使用 -p的时候需要跟一个参数类似于你用react脚手架创建项目需要跟的项目名。
program.parse(process.argv);

除了上面的option还有更改command配置项，比如我有一个命令是截取根目录下的text.js文件夹他就可以通过如下代码进行配置，表示我要传的参数，action会接收到值来进行后续操作，如下图所示：

program.command('split <str>')
  .description('Split a string into substrings and display as an array')
  .action(str) => {
    console.log(str);
  });

2.chalk

更改命令行的字体颜色，地址为：github.com/chalk/chalk

const { program } = require("commander"); //引入commander
program.name("Zc-cli-01").usage("<command>  [option]"); //配置包的名字和他的一些配置项
program                                  
  .option("-d, --debug", "output extra debugging")
  .option("-s, --small", "small pizza size")
  .option("-p, --pizza-type <type>", "flavour of pizza"); //配置基础命令向上面的node -v一样<type>是提示当你使用 -p的时候需要跟一个参数类似于你用react脚手架创建项目需要跟的项目名。
program.parse(process.argv);

3.inquirer

命令行进行问话交互，地址为：github.com/SBoudrias/I...

const inquirer = require("inquirer");
const questions = [
  {
    // 问题对象
    type: "input",
    name: "project",
    message: "项目名称",
    default: "copyLeft",
  },
  {
    type: "list",
    name: "type",
    message: "项目类型",
    default: "vue",
    choices: [
      { name: "vue", value: "vue" },
      { name: "react", value: "react" },
      { name: "jq", value: "jq" },
    ],
  },
];
inquirer.prompt(questions);

4.ora

添加交互动画比如等待下载的动画

const ora = require("ora");
const spinner = ora("Loading unicorns").start();

5.figlet

添加艺术字，地址为 github.com/cmatsuoka/f...

var figlet = require("figlet");
figlet("Hello World!!", function (err, data) {
});

四、发布

1.先注册一个npm的账号

2.在命令行使用npm login进行登录

3.最后在执行npm publish进可以进行发布了

随想

这篇文章只是给大家介绍了一下脚手架开发中比较常用的工具，具体的复杂业务并没有涉及到，日常的开发中还会遇到很多很多工具，如果大家有比较常用的工具欢迎在下方留言！！！