{"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":{}}]}]}
「從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":{}}]}]}
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章