【入门级】搭建基础脚手架

460 阅读3分钟

在工作上会有很多类似项目结构的项目以及一些规定的流程。为了简化人公流程、增加开发效率、减少重复劳动,最后选择搭建一款崭新的脚手架。

1. 搭建脚手架需要用到哪些知识?

脚手架本质上是一个 node 应用,所以我们需要了解一些 node 的知识,了解不多也没关系,只需要了解一些操作文件的 API 就行。node 文件系统文档地址:nodejs.org/docs/latest…

其次,脚手架是通过指令去操作的,所以这些指令是怎么生成的呢?这时候我们就需要了解一下 commandercommander 可以让开发者设置指令然后用户输入指令匹配到开发者指令的时候,就会走相应的流程了。

然后,在我们开发的时候,作为一个程序员肯定想用户使用的更舒服些呀,所以我们需要美化控制台的输出,这时候我们需要用到 chalkchalk 可以做一些输出美化的工作。

当然我们的脚手架要给客户一些交互是吧,毕竟要贴近用户,满足用户一定程度上面的一些自定义功能,所以我们需要提供用户可自定义拼接选项和输入一些属性定义的功能,这时候就会用到 inquirerinquirer 可以实现输入文本、下拉选项等表单操作类似的功能。

最后,我们在项目上可能会用到别名类似的功能,所以会用到 module-alias

2. 初始化脚手架

2.1 初始化 node 应用

在一个目录下面,我们需要先创建一个空项目。 执行以下指令:

mkdir 项目名称 && cd 项目名称

image.png

创建完项目之后,我们需要初始化为 node 项目。

npm init

一路滑到底结束!

image.png

2.2 创建入口文件

在项目根目录下面创建 index.js 为入口文件。

2.3 完善目录结构

首先我们需要先创建 src 目录,这个目录放置我们主要的业务代码。

其次,我们需要将事先的一些 npm 依赖导入进去。

npm install -S commander chalk inquirer module-alias

然后,我们完善一下入口文件 index.js

const commander = require('commander');
const { program } = commander;

/* 查看 CLI 版本 */  
program
  .command('version')
  .description('cli 的版本号')
  .action(async () => {
    console.log(`cli 当前版本号`);
  })

commander.parse(process.argv)

再然后,我们需要设置一下 package.json 中的指令输出文件

{
  "name": "shuangcli",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "bin": {
    "juejuezi": "bin/shuang"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "shuangyue <18795905365@163.com>",
  "license": "MIT",
  "dependencies": {
    "chalk": "^5.0.0",
    "commander": "^8.3.0",
    "inquirer": "^8.2.0",
    "module-alias": "^2.2.2"
  }
}

同时创建 bin/shuang 文件, 文件内容如下:

#!/usr/bin/env node

require('../index');

这时候,我们需要看到我们写的这些有没有效果,那我们就需要将我们的脚手架 link 到我们的本地环境中,执行:

npm link

然后,在我们的控制台输入 juejuezi

image.png

这不就出来了吗!!!
更多的代码请查看 github 上面的源码