「从0到1如何快速实现cli工具」

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"大家好,我是速冻鱼🐟,一条水系前端💦,喜欢花里胡哨💐,持续沙雕🌲欢迎小伙伴们加我微信:","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"sudongyuer","attrs":{}}],"attrs":{}},{"type":"text","text":"拉你进群,一起讨论,期待与大家共同成长🥂","attrs":{}}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"阅读本文 🦀","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"1.您将了解到什么是CLI","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"2.您将了解到什么是Docker","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"3.您将了解到什么是NodeJs","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"4.您将了解到如何从零到一快速实现一个CLI工具","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"5.您将了解到如何在我们的项目中使用自己编写的CLI工具","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"本文章对应项目","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"craft-client","attrs":{}}],"attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"仓库地址 :","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/HaiyaoTec/craft-client","title":"","type":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"crft-client","attrs":{}}]},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"🎄","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前言 🌵","attrs":{}}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"造这个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"cli工具","attrs":{}}],"attrs":{}},{"type":"text","text":"是因为公司之前的项目用的docker镜像生成工具🔧是基于","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"gradle","attrs":{}}],"attrs":{}},{"type":"text","text":"和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"groovy","attrs":{}}],"attrs":{}},{"type":"text","text":"来实现的,显然在前端项目中出现这种东西不太美观,而且项目结构会比较混乱,新接触项目的小伙伴看见项目里这些看不懂的东西就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"一脸懵逼","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"不太友好","attrs":{}}],"attrs":{}},{"type":"text","text":",所以就基于","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"NodeJs","attrs":{}}],"attrs":{}},{"type":"text","text":"环境来重新实现我们的docker镜像生成CLI工具吧^_^","attrs":{}}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前置知识 🐳","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"什么是CLI?","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/67/6710ed7866bdaa8e1d0afccfc04747e4.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"CLI(command-line-interface) ","attrs":{}}],"attrs":{}},{"type":"text","text":"是一个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"命令行程序","attrs":{}}],"attrs":{}},{"type":"text","text":",它接受文本输入以执行操作系统功能。简单得来说就是可以通过命令行来执行的程序,不同于我们的图形操作界面而已。例如我们比较熟悉的CLI工具有","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"npm","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"vue-cli","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"creat-react-app","attrs":{}}],"attrs":{}},{"type":"text","text":"等等都是我们比较熟悉的CLI工具。我们通过CLI执行操作系统功能,最主要的作用我认为可以让将日常繁琐且重复的开发步骤简化并抽象为一个CLI工具,帮助我们简化开发,","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Don not repeat yourself !!!","attrs":{}}],"attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"vue-cli","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/93/9335a1c668953f8759caf15f33cfca18.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"creat-react-app","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/58/5814e1f5a6651c388ab70def8ef810ec.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"什么是Docker?","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/1d/1df6ef3d8860fbf1464c3ae9c046c560.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"docker是一项操作系统层面的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"虚拟化技术","attrs":{}}],"attrs":{}},{"type":"text","text":",本文重点不在介绍docker,说人话docker就是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"虚拟机","attrs":{}}],"attrs":{}},{"type":"text","text":",我们在docker中运行我们的程序(比如","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"web应用","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"web服务器","attrs":{}}],"attrs":{}},{"type":"text","text":"等等)。","attrs":{}}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"什么是NodeJs?","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/fe/feff2b94d8bbbf6aa9f90585ff725798.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我认为知道以下两点就够了","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Node.js 是一个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"开源","attrs":{}}],"attrs":{}},{"type":"text","text":"与","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"跨平台","attrs":{}}],"attrs":{}},{"type":"text","text":"的 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"JavaScript 运行时环境","attrs":{}}],"attrs":{}},{"type":"text","text":"。 它是一个可用于几乎任何项目的流行工具!","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Node.js 在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"浏览器外","attrs":{}}],"attrs":{}},{"type":"text","text":"运行 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"V8 JavaScript 引擎","attrs":{}}],"attrs":{}},{"type":"text","text":"(Google Chrome 的内核)。","attrs":{}}]}]}],"attrs":{}}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"需求 💻","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Web静态站点项目生成基于Nginx的Docker镜像文件","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Node应用项目生成基于Node的Docker镜像文件","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Web静态站点+Web服务器应用项目生成基于Node的Docker镜像文件","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"开发思路 ⭐","attrs":{}}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面我将带领各位小伙伴一起实现我们的第一个需求,对","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Web静态站点项目","attrs":{}}],"attrs":{}},{"type":"text","text":"生成基于","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Nginx","attrs":{}}],"attrs":{}},{"type":"text","text":"的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Docker镜像文件","attrs":{}}],"attrs":{}},{"type":"text","text":",其他需求实现类似,就不一一实现了。","attrs":{}}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"1. 首先是初始化项目啦","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"npm init ","attrs":{}}],"attrs":{}},{"type":"text","text":"初始化我们的CLI项目就叫","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"craft-client","attrs":{}}],"attrs":{}},{"type":"text","text":"吧","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"craft-clinet","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c0/c0d1745298ed0af3fe6e20dc62609009.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"2. 如何让CLI工具在项目中运行呢","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"2.1 配置package.json","attrs":{}}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里一定要在package.json文件中配置","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"bin","attrs":{}}],"attrs":{}},{"type":"text","text":",为你这个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ClI工具","attrs":{}}],"attrs":{}},{"type":"text","text":"指定执行的入口文件","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"package.json","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"//、、、\n \"bin\": {\n \"craft\": \"bin/craft.js\"\n },\n \"author\": \"sudongyu\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"commander\": \"^8.2.0\",\n \"cpy\": \"^8.1.2\",\n \"figlet\": \"^1.5.2\",\n \"make-dir\": \"^3.1.0\",\n \"process\": \"^0.11.10\",\n \"shelljs\": \"^0.8.4\"\n },\n//、、、\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"2.2 在项目中创建bin文件夹并书写我们的入口文件","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e7/e7242399824e4de08ac470ff9bcde21c.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"2.3 编写我们的入口craft.js文件","attrs":{}}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一定要在开头指定我们代码的执行环境","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"#!/usr/bin/env node","attrs":{}}],"attrs":{}},{"type":"text","text":"这里我们指定为node环境","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"craft.js","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"#!/usr/bin/env node\nimport {cwd} from 'process';\nimport path from \"path\";\nimport {Command} from 'commander/esm.mjs';\nimport {createRequire} from \"module\";\nimport {frameworkDockerTask, nginxDockerTask, nodeDockerTask} from './tasksUtiles/index.js'\n//踩坑,在node中使用esm必须完成路径.js不能简写\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"3. 获取package.json文件对象信息","attrs":{}}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里我们获取调用CLI工具项目的package.json 文件对象获取我们需要的信息,必须当前项目名称类型等等,方便我们后边的代码编写","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"craft.js","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const require = createRequire(import.meta.url);\n//获取PackgeJson文件信息\nlet pkgManifest = require(path.join(cwd(), 'package.json'));\n\n//获取craft配置信息对象\nlet craftConfig = pkgManifest?.craft;\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"4. 使用Commander库来获取命令行参数","attrs":{}}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用第三方库Commander可以很方便的获取命令行参数,生成我们的帮助信息命令等等","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"craft.js","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"import {Command} from 'commander/esm.mjs\n\nconst program = new Command();\n\nprogram.option('-d, --docker', 'generate docker image');\n\nprogram.addHelpText('after', `\nExample call:\n $ craft-h --help`);\n\nprogram.parse(process.argv);\n\n//获取命令行参数\nconst options = program.opts();\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"5. 根据命令行参数来生成不同类型的Docker镜像文件","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"craft.js","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"//根据docker命令执行打包docker镜像\nif (options.docker) {\n\n try {\n //1.输出开始打包docker日志\n console.log(`- craft docker running ^_^ !!!!`);\n //2.获取配置文件信息\n switch (craftConfig.buildType) {\n case \"web\":\n console.log(`\n ###################\n web docker building\n ###################\n `)\n\n nginxDockerTask(craftConfig.web.distDir)\n break;\n case \"node\":\n console.log(`\n ####################\n node docker building\n ####################\n `)\n\n nodeDockerTask()\n break;\n case \"lib\":\n\n console.log('node docker building')\n\n break;\n\n case \"framework\":\n\n console.log(`\n #########################\n framework docker building\n #########################\n `)\n\n frameworkDockerTask()\n\n break;\n\n default :\n console.log('can not find buildType')\n }\n } catch (e) {\n console.error(`\n ==========================\n craft docker faild ! ! !\n ==========================\n `,e)\n }\n}\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"6. 生成基于nginx的Docker镜像文件","attrs":{}}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这里我们以web静态站点项目为例,所以我们要生成一个基于nginx的Docker镜像,我们就需要生成nginx的配置文件,在dockerFile引入等。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先我们需要将web项目打包好的dist目录复制到build目录下 ","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"(这里我们会临时创建一个build目录用来放置打包好的dist文件和nginx相关配置文件,方便我们后续生成镜像)","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在build目录下生成nginxConfig配置文件","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"生成基于nginx的DockerFile文件(用来生成镜像的文件)","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"生成胡哨的命令行文字图片(表示我们镜像生成完成了)","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"NginxDockerTask.js","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"async function nginxDockerTask(buildDir = 'dist') {\n //多加一次为空串的判断,防止后边cpy拷贝所有目录\n if(!buildDir)buildDir=\"dist\"\n\n // Copy buildDir to build/buildDir\n await copyFile(buildDir,'build')\n\n //生成NginxConfig\n await generateNginxConfig()\n\n //生成NginxDockerFile\n await generateNginxDockerFile()\n\n // 生成docker镜像文件\n await generateDockerImage()\n\n //展示craft图案执行完成\n showFiglet()\n\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"tips:我们可以使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"cpy","attrs":{}}],"attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"开源库来拷贝文件,使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"figlet","attrs":{}}],"attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"来展示文字图片,使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"NodeJs","attrs":{}}],"attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"提供的","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"fs","attrs":{}}],"attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"文件操作系统","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"API","attrs":{}}],"attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"来写入我们的数据","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"7. 测试我们CLI工具的完整流程","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"在项目中引入我们编写好的CLI工具并配置","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"package.json","attrs":{}}],"attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"文件","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"package.json","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n \"name\": \"XXX\",\n \"version\": \"0.1.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"craft-h\": \"craft -h\",//这里就是我们CLI脚本命令\n \"craft-docker\": \"craft --docker\"//这里就是我们CLI脚本命令\n },\n //我们的CLI工具需要的配置信息\n \"craft\": {\n \"buildType\": \"framework\",\n \"web\": {\n \"distDir\": \"\"\n },\n \"node\": {\n \"command\": \"\"\n },\n \"framework\": {\n \"web\": \"\",\n \"server\": \"\"\n }\n },\n //导入我们CLI工具库\n \"devDependencies\": {\n \"@imf/craft-client\": \"^1.0.1\"\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"在","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"shell","attrs":{}}],"attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"中执行我们的脚本命令","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"shell","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"shell"},"content":[{"type":"text","text":"npm run craft-docker\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"成功在","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"shell","attrs":{}}],"attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"看见我们花里胡哨的","attrs":{}},{"type":"codeinline","content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"LOGO","attrs":{}}],"attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":",表示镜像成功生成","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"shell","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/61/61098d20ee4fb6c1e29bcfd0c34f8d84.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"在Docker DeskTop软件中查看我们的镜像并运行","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/e2/e2968ce6287b48e0ccf6a1ded1805f57.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"镜像成功运行","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/bd/bd14ba7e9651a65dca142c23ab3ddd47.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"总结 🍁","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"到这我们的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"CLI工具","attrs":{}}],"attrs":{}},{"type":"text","text":"就完成啦🌈,通过编写","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"CLI工具","attrs":{}}],"attrs":{}},{"type":"text","text":"可以提高项目","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"开发的效率","attrs":{}}],"attrs":{}},{"type":"text","text":",将","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"重复","attrs":{}}],"attrs":{}},{"type":"text","text":"的工作进行","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"抽象","attrs":{}}],"attrs":{}},{"type":"text","text":",希望每个小伙伴都能够自己动手实现一个提升效能的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"CLI工具","attrs":{}}],"attrs":{}},{"type":"text","text":",一起感受它的魅力吧🤹‍♂️~","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c0/c0d1745298ed0af3fe6e20dc62609009.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"craft-client源代码仓库地址:","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/HaiyaoTec/craft-client","title":"","type":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"craft-client","attrs":{}}]},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"👣","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"参考文献 📚","attrs":{}}]},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://www.w3schools.com/whatis/whatis_cli.asp","title":"","type":null},"content":[{"type":"text","text":"w3schools","attrs":{}}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"http://nodejs.cn/learn","title":"","type":null},"content":[{"type":"text","text":"nodejs.cn","attrs":{}}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://github.com/tj/commander.js","title":"","type":null},"content":[{"type":"text","text":"commander.js","attrs":{}}]}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"结束语🌞","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/8c/8c248a3457d9f90d186efb95f08e9123.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那么我的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"「从0到1如何快速实现cli工具」","attrs":{}}],"attrs":{}},{"type":"text","text":"就结束了,文章的目的其实很简单,就是对日常工作的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"总结和输出","attrs":{}}],"attrs":{}},{"type":"text","text":",输出一些觉得对大家有用的东西,","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"菜不菜不重要,但是热爱","attrs":{}},{"type":"text","text":"🔥,希望通过文章认识更多志同道合的朋友,如果你也喜欢","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"折腾","attrs":{}}],"attrs":{}},{"type":"text","text":",欢迎加我","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"好友","attrs":{}}],"attrs":{}},{"type":"text","text":",一起","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"沙雕","attrs":{}}],"attrs":{}},{"type":"text","text":",一起","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"进步","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"github🤖:","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/sudongyuer/","title":"","type":null},"content":[{"type":"text","text":"sudongyu","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"个人博客👨‍💻:","attrs":{}},{"type":"link","attrs":{"href":"https://sudongyuer.github.io/","title":"","type":null},"content":[{"type":"text","text":"速冻鱼blog","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"vx👦:sudongyuer","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"写在最后","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"伙伴们,如果喜欢我的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"口水话","attrs":{}}],"attrs":{}},{"type":"text","text":"给🐟🐟点一个赞👍或者关注➕都是对我最大的支持。","attrs":{}}]}]}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章