摘要:本文主要是介紹開發一個簡單的腳手架,了解開發的基本流程最終通過鏈接到全局包。完成之后,就可以把腳手架發布到上面,通過進行全局安裝,就可以在自己本機上執行來初始化項目,這樣便完成了一個簡單的腳手架工具了。
腳手架,這個名詞對于作為前端的我們來說,也許并不陌生吧,像vue-cli,react-native-cli等,全局安裝后,只需要在命令行中敲入一個簡單的命令,便可幫我們快速的生成一個初始項目,如vue init webpack projectName,即可生成一個初始的vue項目。
本文主要是介紹開發一個簡單的腳手架,了解開發的基本流程、最終通過npm link鏈接到全局包。
1、減少時間,不必從零開始搭建初始項目,提高開發效率。
2、便于多人協作。
3、項目更新同步方便,只需要更新代碼庫中項目模板,即可下載最新的項目。
在開始項目前,先簡單介紹下node相關的一些基礎知識,通過npm init初始化一個node項目時,會生成一個package.json的配置文件,包括項目名稱、版本、作者、依賴等相關信息,主要說一下其中的bin字段。
很多包都有一個或多個可執行的文件,希望放在PATH中,(實際上,就是這個功能讓npm可執行的)。
當你要用這個功能時,需要給package.json中的bin字段添加一個命令名,并指向需要執行的文件(即后文的入口文件)。初始化的時候npm會將他鏈接到prefix/bin(全局初始化)或者./node_modules/.bin/(本地初始化)。
比如,npm有:
{ "bin" : { "npm" : "./npm-cli.js" } }
所以,當你初始化npm,它會創建一個符號鏈接到npm-cli.js腳本到/usr/local/bin/npm。
如果你只有一個可執行文件,并且名字和包名一樣。那么你可以只用一個字符串,比如:
{ "name": "my-program" , "version": "1.2.5" , "bin": "./path/to/program" }
結果和這個一樣:
{ "name": "my-program" , "version": "1.2.5" , "bin" : { "my-program" : "./path/to/program" } }
想要了解package.json更多的詳細配置,請參考這篇文章
思路要開發腳手架,首先要理清思路,腳手架是如何工作的?我們可以借鑒 vue-cli 的基本思路。vue-cli 是將項目模板放在 git 上,運行的時候再根據用戶交互下載不同的模板,經過模板引擎渲染出來,生成項目。這樣將模板和腳手架分離,就可以各自維護,即使模板有變動,只需要上傳最新的模板即可,而不需要用戶去更新腳手架就可以生成最新的項目。那么就可以按照這個思路來進行開發了。
初始化項目新建一個文件夾,打開命令行工具,通過npm init 進行項目初始化,會在項目根目錄下生成package.json文件。
npm init安裝依賴
npm install commander download-git-repo inquirer handlebars ora chalk log-symbols shelljs -S
除此之外,還使用了nodejs的幾個內置模塊:fs、path、child_process
commander.js:可以自動的解析命令和參數,用于處理用戶輸入的命令。
download-git-repo:下載并提取 git 倉庫,用于下載項目模板。
Inquirer.js:通用的命令行用戶界面集合,用于和用戶進行交互。
handlebars.js:模板引擎,將用戶提交的信息動態填充到文件中。
ora:下載過程久的話,可以用于顯示下載中的動畫效果。
chalk:可以給終端的字體加上顏色。
log-symbols:可以在終端上顯示出 √ 或 × 等的圖標。
fs:node內置的文件處理模塊。
path:node內置的路徑處理、解析模塊。
child_process:node中創建子進程模塊。
配置入口文件1、在package.json文件中增加bin字段,暫且先命名為okcli吧。
"bin": { "okcli": "./index.js" }
2、在項目根目錄新建index.js文件,在index.js文件頂部添加以下代碼:
#!/usr/bin/env node
即可進行開發。
在這里,簡單介紹下這行代碼含義。
!/usr/bin/node是告訴操作系統執行這個腳本的時候,調用/usr/bin下的node解釋器;
!/usr/bin/env node這種用法是為了防止操作系統用戶沒有將node裝在默認的/usr/bin路徑里。當系統看到這一行的時候,首先會到env設置里查找node的安裝路徑,再調用對應路徑下的解釋器程序完成操作。
!/usr/bin/node相當于寫死了node路徑;
!/usr/bin/env node會去環境設置尋找node目錄,推薦這種寫法
const program = require("commander"); const inquirer = require("inquirer"); const symbols = require("log-symbols"); const download = require("download-git-repo"); const handlebars = require("handlebars"); const chalk = require("chalk"); const ora = require("ora"); const shell = require("shelljs"); const child_process = require("child_process"); const fs = require("fs"); const path = require("path"); program.version("1.0.0", "-v, --version") .command("init") .action((name) => { console.log(name); }); program.parse(process.argv);
調用program.version("1.0.0", "-v, --version")會將-v和--version添加到命令行中,調用時可通過帶上該參數獲取該腳手架的版本號(命令 -v/--version),調用comand("init
action是執行command命令時發生的回調,參數為命令行中輸入的name,即init
現在可以通過調用node index.js init test,可以看到控制臺中已經打印了輸入的項目名,也就是test。
其中:program.parse(process.argv)解析命令行中的參數,解析出name,并傳入action回調。
通過download-git-repo或者直接使用shelljs或者child_process直接運行命令進行下載模塊(個人選擇的是第三種)。
download-git-repo 支持從 Github、Gitlab 和 Bitbucket 下載倉庫,各自的具體用法可以參考官方文檔。
download("https://github.com/jefferyE/webpack-configuration-for-vue", name, {clone: true}, (err) => { if(err){ // spinner.fail(); console.log(symbols.error, chalk.red(err)); }else{ // spinner.fail(); } })
或者
if (shell.exec("git clone https://github.com/jefferyE/webpack-configuration-for-vue").code == 0) { // spinner.succeed(); } else { // spinner.fail(); console.log(symbols.error, chalk.red("模板下載失敗")) }
或者
child_process.exec("git clone https://github.com/jefferyE/webpack-configuration-for-vue", function(err, stdout, stderr) { if (err) { // spinner.fail(); console.log(symbols.error, chalk.red("模板下載失敗")) } else { // spinner.succeed(); } })
其中:download() 第一個參數就是倉庫地址,但是有一點點不一樣。實際的倉庫地址是 https://github.com/jefferyE/w... ,可以看到端口號后面的 ‘/‘ 在參數中要寫成 ‘:’,#master 代表的就是分支名,不同的模板可以放在不同的分支中,更改分支便可以實現下載不同的模板文件了。第二個參數是路徑,上面我們直接在當前路徑下創建一個 name 的文件夾存放模板,也可以使用二級目錄比如 test/${name}
交互命令行命令行交互功能可以在用戶執行 init 命令后,向用戶提出問題,接收用戶的輸入并作出相應的處理。這里使用 inquirer.js 來實現,也可以自己使用node內置的readline模塊。
具體可以參考我的這篇文章
inquirer.prompt([ { type: "input", name: "author", message: "請輸入作者名稱" } ]).then((answers) => { console.log(answers.author); })
通過這里例子可以看出,問題就放在 prompt() 中,問題的類型為 input 就是輸入類型,name 就是作為答案對象中的 key,message 就是問題了,用戶輸入的答案就在 answers 中,使用起來就是這么簡單。更多的參數設置可以參考官方文檔。
渲染package模板這里用 handlebars 的語法對 HTML5/H5Template 倉庫的模板中的 package.json 文件做一些修改。并在下載模板完成之后將用戶輸入的答案渲染到 package.json 中。
{ "name": "{{name}}", "version": "1.0.0", "description": "{{description}}", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "{{author}}", "license": "ISC" }
注意:由于我的項目沒有更改package模板,因此通過在下載模板后,解析時進行動態修改的。
除此之外,通過ora、chalk模塊也進行了一些視覺美化。具體請參考完整代碼。
完整代碼如下:
#!/usr/bin/env node const program = require("commander"); const chalk = require("chalk"); const ora = require("ora"); const fs = require("fs"); const inquirer = require("inquirer"); const shell = require("shelljs"); const symbols = require("log-symbols"); const download = require("download-git-repo"); const child_process = require("child_process"); const handlebars = require("handlebars"); const path = require("path"); program.version("1.0.0", "-v, --version"). command("init"). action(name => { console.log(name); if (!fs.existsSync(name)) { console.log("正在創建項目..."); inquirer.prompt([ { name: "description", message: "請輸入項目描述" }, { name: "author", message: "請輸入作者名稱" } ]).then(answers => { console.log(answers) const spinner = ora("正在向下載模板... "); spinner.start(); child_process.exec("git clone https://github.com/jefferyE/webpack-configuration-for-vue", function(err, stdout, stderr) { if (err) { spinner.fail(); console.log(symbols.error, chalk.red("模板下載失敗")) } else { spinner.succeed(); shell.mv(__dirname + "/webpack-configuration-for-vue", __dirname + "/" + name) const filename = `${name}/package.json`; const meta = { name, description: answers.description, author: answers.author } if (fs.existsSync(filename)) { const content = fs.readFileSync(filename).toString(); let dt = JSON.parse(content); dt.name = "{{name}}"; dt.description = "{{description}}" const result = handlebars.compile(JSON.stringify(dt, null, 2))(meta); fs.writeFileSync(filename, result); console.log(symbols.success, chalk.green("項目初始化完成")); } else { console.log(symbols.error, chalk.red("package不存在")) } } }) }) } else { console.log(symbols.error, chalk.red("項目已存在")); } }) program.parse(process.argv);
其中:
1、在用戶輸入答案之后,開始下載模板,這時候使用 ora 來提示用戶正在下載中。
2、然后通過 chalk 來為打印信息加上樣式,比如成功信息為綠色,失敗信息為紅色,這樣子會讓用戶更加容易分辨,同時也讓終端的顯示更加的好看。
3、除了給打印信息加上顏色之外,還可以使用 log-symbols 在信息前面加上 √ 或 × 等的圖標。
完成之后,就可以把腳手架發布到 npm 上面,通過 -g 進行全局安裝,就可以在自己本機上執行 okcli init [name] 來初始化項目,這樣便完成了一個簡單的腳手架工具了。
鏈接全局命令在根目錄運行 npm link命令,將包鏈接到全局環境。
npm link命令可以將一個任意位置的npm包鏈接到全局執行環境,從而在任意位置使用命令行都可以直接運行該npm包。
具體請參考這篇文章
感謝:
參考文章??文章1
????????????????文章2
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/95415.html
摘要:更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的 更多資源請Star:https://github.com/maidishike... 文章轉自:https://github.com/jsfr...
摘要:目前網上關于插件開發的文章少得可憐,下面分享最近的經歷,如何快速上手開發一個插件。第六步調試插件在打開的網頁中可以看到工具欄中實現了插件。 TinyMCE是一個非常優秀的輕量級的所見即所得HTML編輯器,歷史悠久,開源,在github的start也非常高的,且長期保持更新。TinyMCE的官方插件不少,基本能滿足日常需求,但是有時候我們還需要一些結合業務的功能。這時官方插件無法滿足,就...
摘要:下面來就來講講腳手架的安裝吧。如何安裝安裝只需要在終端下輸入下面一條命令自帶不需要安裝安裝完成后使用即可。原因是的問題,要求版本是。想用安裝,就必須用安裝一下。 前言 Vue作為前端三大框架(Angular,React,Vue)之一,號稱是最簡單,最容易上手的框架,同時也是行內的大趨勢,還可以用來開發最火的小程序。具有開發快,雙向數據流等特點,有些人認為Vue是Angular和Reac...
摘要:下面來就來講講腳手架的安裝吧。如何安裝安裝只需要在終端下輸入下面一條命令自帶不需要安裝安裝完成后使用即可。原因是的問題,要求版本是。想用安裝,就必須用安裝一下。 前言 Vue作為前端三大框架(Angular,React,Vue)之一,號稱是最簡單,最容易上手的框架,同時也是行內的大趨勢,還可以用來開發最火的小程序。具有開發快,雙向數據流等特點,有些人認為Vue是Angular和Reac...
閱讀 1074·2021-11-16 11:45
閱讀 2708·2021-09-27 13:59
閱讀 1315·2021-08-31 09:38
閱讀 3143·2019-08-30 15:52
閱讀 1315·2019-08-29 13:46
閱讀 2085·2019-08-29 11:23
閱讀 1631·2019-08-26 13:47
閱讀 2476·2019-08-26 11:54