写一个自己的vue-cli脚手架-技术圈

目前在市面上存在很多脚手架，如：create-react-app、vue-cli。我们可以通过一行简单的命令，就能创建一个基本的项目工程，大大的提高了开发效率。但是我们会面临一个问题，除了脚手架帮我们创建好的项目框架，我们的项目总有需要定制化的配置，比如我们需要引入我们想要的elementUI框架，引入axios相关的工具类完成http请求等。我们不可能每次开启新项目都再配置一遍吧，这太劳神费力了。

通常我们会搞一个个性化脚手架cli，平时创建项目时通过该脚手架一键生成，并同时完成所有需要的配置，以快速开发。接下来，我们看看怎么搞？

1.CLI 的运行原理

创建动态链接库，暴露全局 cli 命令
如果要暴露一个全局的命令，首先需要在 package.json 文件中编写一个 bin 命令，当前示例指向bin目录下的mycli.js文件。
```
 "bin": "bin/mycli.js"
```
读取并解析命令行参数
读取命令行参数其实非常简单，使用 program.argv 获取
提供用户可选的配置项
根据用户的选择，创建不同类型的项目模板，比如是否要typescript支持
拷贝自定义模板到本地
一般我们会事先准备好一个项目模板，供cli下载

2.创建cli所需要的部分依赖模块

commander实现控制台命令行问题交互；
inquirer 命令行中的 select 选择器
chalk为控制台输出的文字着色；
download-git-repo拉去github项目代码；
ora实现控制台进度条样式；
figlet 生成好看的图标文字
lolcatjs 生成随机颜色

3.实现脚手架代码逻辑片段

3.1 引入所需依赖

#!/usr/bin/env nodeconst path = require("path");const program = require('commander');//cmd控制台交互const ora = require('ora');//进度条const chalk = require('chalk');//给提示文案着色const download = require('download-git-repo');//拉取github项目const fs = require('fs');const minimist = require('minimist')//轻量级命令行参数解析引擎const figlet = require("figlet");//酷炫的文字工具const printer = require("@darkobits/lolcatjs");//生成颜色

3.2创建cli版本和用法命令

//展示mycli logoconst logotext = figlet.textSync("my-cli");const logotextColor = printer.fromString(logotext);//提取versionconst version=`${logotextColor} ${require('../package').version}`;program    .version(version)    .usage(' [options]')

3.3 从项目模板地址，下载到本地

我们这里使用了工具类download-git-repo的download方法，大家可以查下相关API

// 成功和失败文案着色const success = chalk.blueBright;const error = chalk.bold.red;//地址有多种写法，这个大家可以查看download-git-repo相关APIconst templateUrl = 'github:napoleonjk/tmp-vue3-template#main'//下载到指定目录，名称基于用户输入的appNameconst dir = path.join(process.cwd(),appName);download(templateUrl, dir, { clone: true }, function (err) {    // 拉取项目代码    if (!err) {        //成功的逻辑         spinner.succeed(success('拉取成功'));          //更改 package.json 中的 name 和版本号，实现参照后文          changePackage(appName);          spinner.succeed(success('项目初始化成功'));          spinner.succeed(success(`cd ${appName}`));          spinner.succeed(success('npm install && npm run serve'));    } else {        //失败的逻辑         console.log(err);        spinner.fail(error('拉取失败'));    }});

3.4项目下载完成后，依据用户输入，变更项目名和版本号

// 替换模板package.json文件的name字段const changePackage = (appName) => {    fs.readFile(`${process.cwd()}/${appName}/package.json`, (err, data) => {        if (err) throw err;        let _data = JSON.parse(data.toString());        _data.name = appName;        _data.version = '1.0.0';        let str = JSON.stringify(_data, null, 4);        fs.writeFile(`${process.cwd()}/${appName}/package.json`, str, function (err) {            if (err) throw err;        })    });};

4. 本地调试 npm 模块

基于bin 命令的配置，将我们的包映射到全局，这样就可以通过运行模块名来运行我们的模块，这跟linux上建立一个软链接差不多，以方便我们在本地测试。

cd myclinpm link

5. 看一下各个命令效果

mycli -h

mycli -V

cd workspacemycli init test-project //多试几次，有时候git clone失败

想要获取脚手架mycli源码，回复mycli即可。

学无止境，觉得不错的话，请记得为我关注、点赞、转发三连哦！