接下来CLI的运行原理是什么?如何创建一个mycli?

市面上的脚手架有很多git命令行拉取代码,比如:create-react-app、vue-cli。我们可以通过一行命令创建一个基础项目项目,大大提高了开发效率。但是我们会面临一个问题。除了脚手架帮助我们创建一个好的项目框架外,我们的项目总是需要定制。比如我们需要引入我们想要的elementUI框架,引入axios相关的工具类来完成http请求。我们不可能每次开始新项目都要重新配置一次git命令行拉取代码,太费力了。

通常我们会创建一个个性化的脚手架cli,在创建项目时一键生成,同时完成所有需要的配置,快速开发。接下来,我们看看怎么做?

1.CLI 的工作原理

如果要暴露一个全局命令,首先需要在package.json文件中写一个bin命令。当前示例指向 bin 目录中的 mycli.js 文件。

"bin": "bin/mycli.js"

读取命令行参数其实很简单,使用program.argv来获取

根据用户的选择,创建不同类型的项目模板,比如是否支持typescript

一般我们会提前准备好项目模板供cli下载

2.创建cli所需的部分依赖模块3.实现脚手架代码逻辑片段

3.1 导入所需依赖项

#!/usr/bin/env node
const 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 logo
const logotext = figlet.textSync("my-cli");
const logotextColor = printer.fromString(logotext);
//提取version
const version=`${logotextColor} ${require('../package').version}`;
program
.version(version)
.usage(' [options]')

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

我们这里使用工具类download-git-repo的下载方式,可以查看相关API

// 成功和失败文案着色
const success = chalk.blueBright;
const error = chalk.bold.red;
//地址有多种写法,这个大家可以查看download-git-repo相关API
const templateUrl = 'github:napoleonjk/tmp-vue3-template#main'
//下载到指定目录,名称基于用户输入的appName
const 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 mycli
npm link

5.看看每个命令的效果

mycli -h

mycli -V

cd workspace
mycli init test-project //多试几次,有时候git clone失败

如果想获取脚手架mycli源码,私信我mycli。

学无止境,创造不易。如果觉得不错,请记得为我关注、点赞、转发。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论