本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金
大家好，我是速冻鱼🐟，一条水系前端💦，喜欢花里胡哨💐，持续沙雕🌲，是隔壁寒草🌿的好兄弟，刚开始写文章。如果喜欢我的文章，可以关注➕点赞，为我注入能量，与我一同成长吧～
阅读本文 🦀
1.您将了解到什么是CLI
2.您将了解到什么是Docker
3.您将了解到什么是NodeJs
4.您将了解到如何从零到一快速实现一个CLI工具
5.您将了解到如何在我们的项目中使用自己编写的CLI工具
本文章对应项目craft-client仓库地址 ：crft-client🎄
前言 🌵
造这个
cli工具是因为公司之前的项目用的docker镜像生成工具🔧是基于gradle和groovy来实现的，显然在前端项目中出现这种东西不太美观，而且项目结构会比较混乱，新接触项目的小伙伴看见项目里这些看不懂的东西就是一脸懵逼、不太友好，所以就基于NodeJs环境来重新实现我们的docker镜像生成CLI工具吧^_^
前置知识 🐳
什么是CLI？
CLI(command-line-interface)是一个命令行程序，它接受文本输入以执行操作系统功能。简单得来说就是可以通过命令行来执行的程序，不同于我们的图形操作界面而已。例如我们比较熟悉的CLI工具有npm、vue-cli、creat-react-app等等都是我们比较熟悉的CLI工具。 我们通过CLI执行操作系统功能，最主要的作用我认为可以让将日常繁琐且重复的开发步骤简化并抽象为一个CLI工具，帮助我们简化开发，Don not repeat yourself !!!
vue-cli
creat-react-app
什么是Docker?
docker是一项操作系统层面的
虚拟化技术，本文重点不在介绍docker，说人话docker就是虚拟机，我们在docker中运行我们的程序(比如web应用、web服务器等等)。
什么是NodeJs？
我认为知道以下两点就够了
- Node.js 是一个
开源与跨平台的JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！- Node.js 在
浏览器外运行V8 JavaScript 引擎（Google Chrome 的内核）。
需求 💻
- Web静态站点项目生成基于Nginx的Docker镜像文件
- Node应用项目生成基于Node的Docker镜像文件
- Web静态站点+Web服务器应用项目生成基于Node的Docker镜像文件
开发思路 ⭐
下面我将带领各位小伙伴一起实现我们的第一个需求，对
Web静态站点项目生成基于Nginx的Docker镜像文件，其他需求实现类似，就不一一实现了。
1. 首先是初始化项目啦
npm init 初始化我们的CLI项目就叫craft-client吧
craft-clinet
2. 如何让CLI工具在项目中运行呢?
2.1 配置package.json
这里一定要在package.json文件中配置
bin，为你这个ClI工具指定执行的入口文件
package.json
//、、、
"bin": {
"craft": "bin/craft.js"
},
"author": "sudongyu",
"license": "ISC",
"dependencies": {
"commander": "^8.2.0",
"cpy": "^8.1.2",
"figlet": "^1.5.2",
"make-dir": "^3.1.0",
"process": "^0.11.10",
"shelljs": "^0.8.4"
},
//、、、
}
2.2 在项目中创建bin文件夹并书写我们的入口文件
2.3 编写我们的入口craft.js文件
一定要在开头指定我们代码的执行环境
#!/usr/bin/env node这里我们指定为node环境
craft.js
#!/usr/bin/env node
import {cwd} from 'process';
import path from "path";
import {Command} from 'commander/esm.mjs';
import {createRequire} from "module";
import {frameworkDockerTask, nginxDockerTask, nodeDockerTask} from './tasksUtiles/index.js'
//踩坑，在node中使用esm必须写完整路径.js不能简写
3. 获取package.json文件对象信息
这里我们获取调用CLI工具项目的package.json 文件对象获取我们需要的信息，获取当前项目名称类型等等，方便我们后边的代码编写
craft.js
tips:这里获取package.json文件对象必须使用commonJs规范才行
const require = createRequire(import.meta.url);
//获取PackgeJson文件信息
let pkgManifest = require(path.join(cwd(), 'package.json'));
//获取craft配置信息对象
let craftConfig = pkgManifest?.craft;
4. 使用Commander库来获取命令行参数
使用第三方库Commander可以很方便的获取命令行参数，生成我们的帮助信息命令等等
craft.js
import {Command} from 'commander/esm.mjs
const program = new Command();
program.option('-d, --docker', 'generate docker image');
program.addHelpText('after', `
Example call:
$ craft-h --help`);
program.parse(process.argv);
//获取命令行参数
const options = program.opts();
5. 根据命令行参数来生成不同类型的Docker镜像文件
craft.js
//根据docker命令执行打包docker镜像
if (options.docker) {
try {
//1.输出开始打包docker日志
console.log(`- craft docker running ^_^ !!!!`);
//2.获取配置文件信息
switch (craftConfig.buildType) {
case "web":
console.log(`
###################
web docker building
###################
`)
nginxDockerTask(craftConfig.web.distDir)
break;
case "node":
console.log(`
####################
node docker building
####################
`)
nodeDockerTask()
break;
case "lib":
console.log('node docker building')
break;
case "framework":
console.log(`
#########################
framework docker building
#########################
`)
frameworkDockerTask()
break;
default :
console.log('can not find buildType')
}
} catch (e) {
console.error(`
==========================
craft docker faild ! ! !
==========================
`,e)
}
}
6. 生成基于nginx的Docker镜像文件
这里我们以web静态站点项目为例，所以我们要生成一个基于nginx的Docker镜像，我们就需要生成nginx的配置文件，在dockerFile引入等。
-
首先我们需要将web项目打包好的dist目录复制到build目录下 (这里我们会临时创建一个build目录用来放置打包好的dist文件和nginx相关配置文件，方便我们后续生成镜像)
-
在build目录下生成nginxConfig配置文件
-
生成基于nginx的DockerFile文件(用来生成镜像的文件)
-
生成胡哨的命令行文字图片(表示我们镜像生成完成了)
NginxDockerTask.js
async function nginxDockerTask(buildDir = 'dist') {
//多加一次为空串的判断，防止后边cpy拷贝所有目录
if(!buildDir)buildDir="dist"
// Copy buildDir to build/buildDir
await copyFile(buildDir,'build')
//生成NginxConfig
await generateNginxConfig()
//生成NginxDockerFile
await generateNginxDockerFile()
// 生成docker镜像文件
await generateDockerImage()
//展示craft图案执行完成
showFiglet()
}
tips:我们可以使用cpy开源库来拷贝文件，使用figlet来展示文字图片，使用NodeJs提供的fs文件操作系统API来写入我们的数据
7. 测试我们CLI工具的完整流程
- 在项目中引入我们编写好的CLI工具并配置
package.json文件
package.json
{
"name": "XXX",
"version": "0.1.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"craft-h": "craft -h",//这里就是我们CLI脚本命令
"craft-docker": "craft --docker"//这里就是我们CLI脚本命令
},
//我们的CLI工具需要的配置信息
"craft": {
"buildType": "framework",
"web": {
"distDir": ""
},
"node": {
"command": ""
},
"framework": {
"web": "",
"server": ""
}
},
//导入我们CLI工具库
"devDependencies": {
"@imf/craft-client": "^1.0.1"
}
}
- 在
shell中执行我们的脚本命令
shell
npm run craft-docker
成功在shell看见我们花里胡哨的LOGO，表示镜像成功生成
shell
在Docker DeskTop软件中查看我们的镜像并运行
镜像成功运行
总结 🍁
到这我们的CLI工具就完成啦🌈，通过编写CLI工具可以提高项目开发的效率，将重复的工作进行抽象，希望每个小伙伴都能够自己动手实现一个提升效能的CLI工具，一起感受它的魅力吧🤹♂️～
craft-client源代码仓库地址：craft-client👣
参考文献 📚
结束语🌞
那么我的第N篇文章就结束了，文章的目的其实很简单，就是对日常工作的总结和输出，输出一些觉得对大家有用的东西，菜不菜不重要，但是热爱🔥，希望通过文章认识更多志同道合的朋友，如果你也喜欢折腾，欢迎加我好友，一起沙雕，一起进步。
github🤖:sudongyu
个人博客👨💻:速冻鱼blog
vx👦:sudongyuer
写在最后
伙伴们，如果喜欢我的口水话给🐟🐟点一个赞👍或者关注➕都是对我最大的支持。
加我微信：sudongyuer，邀你进群，一起学习前端，成为更优秀的工程师～（群二维码在这里->前端要早睡, 二维码过期了的话看链接沸点中的评论，我会把最新的二维码放在评论区，当然也可以加我微信我拉你进群，毕竟我也是有趣的前端，认识我也不赖🌟～
「欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边，抽奖详情见活动文章」。
