資訊專欄INFORMATION COLUMN
摘要：目標(biāo)開(kāi)發(fā)一個(gè)簡(jiǎn)單的腳手架，能夠提供給用戶進(jìn)行安裝。在腳手架中使用腳本。具體用法如下具體展示效果如下對(duì)用戶文件進(jìn)行讀寫(xiě)操作通過(guò)上面的步驟，我們已經(jīng)能夠完成一個(gè)簡(jiǎn)單的腳手架了。
原因
在工作中，需要開(kāi)發(fā)一個(gè)腳手架，用于給相關(guān)用戶提供相關(guān)的開(kāi)發(fā)便利性。
適合人群對(duì)前端、Node操作有一定的了解，同時(shí)向了解腳手架開(kāi)發(fā)過(guò)程或者需要自己實(shí)現(xiàn)一個(gè)腳手架的開(kāi)發(fā)者。
目標(biāo)開(kāi)發(fā)一個(gè)簡(jiǎn)單的腳手架，能夠提供給用戶進(jìn)行安裝。
能夠輸出相關(guān)提示。
對(duì)用戶文件進(jìn)行讀寫(xiě)操作。
在腳手架中使用Shell腳本。
更多與用戶交互和文件操作等進(jìn)階內(nèi)容可以查看同系列第二篇：如何實(shí)現(xiàn)一個(gè)腳手架進(jìn)階版（Vue-cli v2.9學(xué)習(xí)篇）
步驟 開(kāi)發(fā)腳手架腳手架的開(kāi)發(fā)最開(kāi)始過(guò)程與普通的前端項(xiàng)目相同，需要一個(gè)入口文件command.js和配置文件package.json。
與其他配置文件不同的是，你需要在command.js文件第一行增加如下聲明：
#! /usr/bin/env node
同時(shí)需要在package.json文件中加上一下一項(xiàng)：
{
...,
"bin": {
"cm-cli": "command.js"
}
}
在配置文件中增加了此項(xiàng)后，只需要在配置文件根目錄下執(zhí)行npm link命令，即可使用cm-cli --help命令來(lái)查看加載的cm-cli腳手架。
如果你發(fā)布了你的腳手架，那么在其他用戶使用命令npm install -g cm-cli之后，便可以在全局下使用你的腳手架了。
對(duì)用戶進(jìn)行提示在對(duì)注釋和命令進(jìn)行提示中，我們需要使用到commander包，使用npm install commander即可進(jìn)行安裝。（如果NPM版本低于5，則需要添加--save參數(shù)保證更新package.json配置文件）。
commander是一個(gè)提供用戶命令行輸入和參數(shù)解析的強(qiáng)大功能。有需要的可以閱讀相關(guān)的庫(kù)文檔。在這里我介紹兩個(gè)用的最多的方法。
option能夠初始化自定義的參數(shù)對(duì)象，設(shè)置關(guān)鍵字和描述，同時(shí)還可以設(shè)置讀取用戶輸入的參數(shù)。具體用法如下：
const commander = require("commander");
commander.version("1.0.0")
.option("-a, --aaa", "aaaaa")
.option("-b, --bbb", "bbbbb")
.option("-c, --ccc [name]", "ccccc")
.parse(process.argv);
if (commander.aaa) {
console.log("aaa");
}
if (commander.bbb) {
console.log("bbb");
}
if (commander.ccc) {
console.log("ccc", commander.ccc);
}
具體展示如下：
command該方法能夠在命令行增加一個(gè)命令。用戶在執(zhí)行此命令后，能夠執(zhí)行回調(diào)中的邏輯。具體用法如下：
commander
.command("init ")
.description("init extension project")
.action((extensionId) => {
console.log(`init Extension Project "${extensionId}"`);
// todo something you need
});
具體展示效果如下：
對(duì)用戶文件進(jìn)行讀寫(xiě)操作通過(guò)上面的步驟，我們已經(jīng)能夠完成一個(gè)簡(jiǎn)單的腳手架了。下面，我們需要讀取用戶配置，同時(shí)為用戶生成一些模板文件。
讀取文件現(xiàn)在，我們需要讀取用戶的cm-cli.json配置文件來(lái)進(jìn)行一些配置。
我們可以使用Node.js的fs文件模塊來(lái)對(duì)文件進(jìn)度讀操作，由于此處沒(méi)有太多難點(diǎn)，因此略去。
寫(xiě)入文件模板我們提前將模板文件存儲(chǔ)在CDN上，再根據(jù)本地讀取到的相關(guān)腳手架配置文件來(lái)進(jìn)行模板的下載。
注：腳手架中讀取的路徑為使用者使用時(shí)當(dāng)前路徑，因此沒(méi)有辦法將模板文件存儲(chǔ)在腳手架中進(jìn)行讀取。
我們可以使用諸如request這種庫(kù)來(lái)幫助我們進(jìn)行文件下載，簡(jiǎn)化操作步驟。執(zhí)行npm install request`即可進(jìn)行安裝。
注：在文件寫(xiě)入時(shí)建議先判斷文件是否存在，再進(jìn)行覆蓋。
使用Shell腳本與Node.js提供的API函數(shù)來(lái)看，有些人更加傾向于使用Shell腳本來(lái)進(jìn)行文件操作。幸運(yùn)的是，我們也可以在我們的腳手架中引入node-cmd來(lái)啟用對(duì)Shell腳本的支持。執(zhí)行npm install node-cmd即可進(jìn)行安裝。
具體示例如下：
commander
.command("init ")
.description("init extension project")
.action((extensionId) => {
id = extensionId;
console.log(`init Extension Project "${extensionId}"`);
cmd.get(
`
mkdir -p static/${extensionId}
mkdir tmp
mkdir tmp/source-file
mkdir tmp/build-file
curl -o tmp/source-file/index.js https://xxxxxxxx.com?filename=index.js
touch tmp/source-file/index.css
curl -o tmp/build-file/server.js https://xxxxxxxx.com?filename=server.js
curl -o tmp/build-file/router.js https://xxxxxxxx.com?filename=router.js
curl -o tmp/build-file/package.json https://xxxxxxxx.com?filename=package.json
cp tmp/source-file/* static/${extensionId}
cp tmp/build-file/* ./
rm -fr tmp
npm install
`,
(err, data) => {
console.log(data)
if (!err) {
console.log("init success");
return;
}
console.error("init error");
});
});
我們可以快速的使用Shell腳本來(lái)進(jìn)行文件夾的創(chuàng)建和文件模板的下載。
總結(jié)腳手架想要在終端能夠快速執(zhí)行，可以在package.json配置文件中增加相關(guān)字段。
腳手架需要能夠讀取相關(guān)終端輸入，可以使用commander庫(kù)來(lái)快速開(kāi)發(fā)。
腳手架需要能夠執(zhí)行Shell腳本，可以使用node-cmd庫(kù)來(lái)快速實(shí)現(xiàn)需求。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90165.html
摘要：如果沒(méi)有看過(guò)之前一篇博客的，或者對(duì)的腳手架沒(méi)有了解過(guò)的同學(xué)，推薦先看上一篇如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的腳手架。它是一個(gè)用來(lái)構(gòu)建靜態(tài)網(wǎng)站的類庫(kù)，也能夠用來(lái)對(duì)文件進(jìn)行處理。有任何問(wèn)題歡迎進(jìn)行交流。 前言 在之前一篇博客介紹了關(guān)于Node腳手架的一些基礎(chǔ)的知識(shí)，這篇博客是在之前的基礎(chǔ)上針對(duì)在Node中開(kāi)發(fā)腳手架中遇到的問(wèn)題，如： 終端樣式、交互問(wèn)題 文件處理問(wèn)題 通過(guò)對(duì)Vue-cli 2.9.2的...
摘要：前端每周清單第期支付寶前端構(gòu)建工具發(fā)展用加快網(wǎng)頁(yè)響應(yīng)速度餓了么升級(jí)實(shí)踐前端前端每周清單前端每周清單專注前端領(lǐng)域內(nèi)容，分為新聞熱點(diǎn)開(kāi)發(fā)教程工程實(shí)踐深度閱讀開(kāi)源項(xiàng)目巔峰人生等欄目。 前端每周清單第 12 期：支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁(yè)響應(yīng)速度、餓了么PWA 升級(jí)實(shí)踐 為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉(zhuǎn)載，請(qǐng)與InfoQ中文站聯(lián)系。從屬于筆...
摘要：階段是事件循環(huán)的第一階段習(xí)慣上往往都會(huì)設(shè)置數(shù)將回調(diào)函數(shù)添加到事件循環(huán)的階段的隊(duì)列中等待執(zhí)行。 后端知識(shí)點(diǎn)總結(jié)——NODE.JS（高級(jí)） 1.Node入門(mén): 什么是: 針對(duì)網(wǎng)絡(luò)應(yīng)用開(kāi)發(fā)的平臺(tái)主要特征: 基于Google的JavaScript運(yùn)行時(shí)引擎V8 擴(kuò)展了Node標(biāo)準(zhǔn)類庫(kù): TCP，同步或異步文件管理，HTTP 為什么使用Node: 可以在服務(wù)器端運(yùn)行js: 現(xiàn)有前端團(tuán)隊(duì)可直...
摘要：更多資源請(qǐng)文章轉(zhuǎn)自月份前端資源分享的作用數(shù)組元素隨機(jī)化排序算法實(shí)現(xiàn)學(xué)習(xí)筆記數(shù)組隨機(jī)排序個(gè)變態(tài)題解析上個(gè)變態(tài)題解析下中的數(shù)字前端開(kāi)發(fā)筆記本過(guò)目不忘正則表達(dá)式聊一聊前端存儲(chǔ)那些事兒一鍵分享到各種寫(xiě)給剛?cè)腴T(mén)的前端工程師的前后端交互指南物聯(lián)網(wǎng)世界的 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github.com/jsfr...
摘要：在實(shí)際工作中，我們可以定制一個(gè)屬于自己的腳手架，來(lái)提高自己的工作效率。思路要開(kāi)發(fā)腳手架，首先要理清思路，腳手架是如何工作的我們可以借鑒的基本思路。本地測(cè)試以上是我寫(xiě)的一個(gè)的腳手架源碼，點(diǎn)擊即可查看，歡迎 前言 像我們熟悉的 vue-cli，create-react-app 等腳手架，只需要輸入簡(jiǎn)單的命令 vue init webpack project，即可快速幫我們生成一個(gè)初始項(xiàng)目。...
閱讀 2871·2023-04-25 22:15
閱讀 1886·2021-11-19 09:40
閱讀 2233·2021-09-30 09:48
閱讀 3317·2021-09-03 10:36
閱讀 2119·2021-08-30 09:48
閱讀 1952·2021-08-24 10:00
閱讀 2792·2019-08-30 15:54
閱讀 770·2019-08-30 15:54
