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

开场诗

-爆竹声中一岁除,

  • 春风送暖入屠苏。

  • 千门万户曈曈日,

  • 总把新桃换旧符。

一、序言

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

二.前期准备

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的基础代码配置为下

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会接收到值来进行后续操作,如下图所示:

js 复制代码
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

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);

3.inquirer

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

js 复制代码
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

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

js 复制代码
const ora = require("ora");
const spinner = ora("Loading unicorns").start();

5.figlet

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

js 复制代码
var figlet = require("figlet");
figlet("Hello World!!", function (err, data) {
});

四、发布

1.先注册一个npm的账号

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

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

随想

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

相关推荐
弄不死的强仔30 分钟前
可被electron等调用的Qt截图-录屏工具【源码开放】
前端·javascript·qt·electron·贴图·qt5
霸王蟹1 小时前
el-table组件样式如何二次修改?
前端·javascript·vue.js·笔记·学习·前端框架
star010-2 小时前
一文学会HTML编程之视频+图文详解详析
前端·网络·网络安全·html·html5
star010-2 小时前
【视频+图文详解】HTML基础3-html常用标签
前端·css·网络安全·html·html5·学习方法
无限大.7 小时前
前端知识速记:节流与防抖
前端
十八朵郁金香7 小时前
【VUE案例练习】前端vue2+element-ui,后端nodo+express实现‘‘文件上传/删除‘‘功能
前端·javascript·vue.js
学问小小谢7 小时前
第26节课:内容安全策略(CSP)—构建安全网页的防御盾
运维·服务器·前端·网络·学习·安全
LCG元8 小时前
Vue.js组件开发-实现全屏图片文字缩放切换特效
前端·javascript·vue.js
还是鼠鼠9 小时前
图书管理系统 Axios 源码__新增图书
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
还是鼠鼠12 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap