写一个自己的vuecli脚手架
目前在市面上存在很多脚手架,如: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 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的download方法,大家可以查下相关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 link5. 看一下各个命令效果mycli -h
mycli -V
cd workspace mycli init test-project //多试几次,有时候git clone失败
想要获取脚手架mycli源码,私信我mycli即可。
学无止境,创作不易,觉得不错的话,请记得为我关注、点赞、转发三连哦。