開發構建腳手架命令列工具總結

我們這一章節呢，來總結下構建腳手架的基本過程，總的來說呢，過程也是相當愉快輕鬆的，愉快，心情完美 ~

首先我們需要安裝構建腳手架所需要的依賴，如下：

cnpm install -d commander inquirer chalk ora download-git-repo

核心工具：commander、inquirer、download-git-repo

每個工具的作用

首先我們需要在bin目錄下，定義我們的執行檔案 ( 繫結/解綁全域性 npm link/unlink )：

"bin"

:

#!
/usr/bin/env node
const commander =
require
('commander'
)const path =
require
('path'
)// 定義當前的版本 定義使用的方法 定義四個指令
commander
.version
(require
(path.
resolve
(__dirname,
'../package.json'))
.version)
.usage
('[options]').
command
('add'
,'add a new template').
command
('delete'
,'delete a new template').
command
('list'
,'list all templates').
command
('init'
,'add a new template'
)// 解析命令列的引數
commander.
parse
(process.ar**)

命令列列印如下：

e:\web\github\cli-tool>node ./bin/xr -h usage: xr [options] options: -v, --version output the version number -h, --help output usage information commands: add add a new template delete delete a new template list list all templates

init add a new template

接著呢，我們需要編寫rc-add檔案，在命令列新增我們的模板內容：

//...
// 接收問題的答案
inquirer.
prompt
(questions)
.then
(answers =>
= answers;
// 過濾 unicode 字元
tpl[name]
= url.
replace
(/[\u0000-\u0019]/g,''
)// 把資訊寫入 template.json 檔案中
fs.writefile
(path.
resolve
(__dirname,
'../template.json'),
json
.stringify
(tpl)
,'utf-8'
, err =>)}
)

最終效果：

e:\web\github\cli-tool>node ./bin/xr-add ? 請輸入模板名稱 riverscoder ? 請輸入模板位址 riverscoder/webpack-vue-cli-yourowm 新增成功 success! 最新的模板列表如下:

這兩個檔案rc-delete和rc-list很簡單，這裡呢，直接貼核心**：

//...
// 接收問題的答案
inquirer.
prompt
(questions)
.then
(answers =>
= answers;
delete tpl[name]
;// 把資訊寫入 template.json 檔案中
fs.writefile
(path.
resolve
(__dirname,
'../template.json'),
json
.stringify
(tpl)
,'utf-8'
, err =>);
})

#!
/usr/bin/env node
const path =
require
('path');
const chalk =
require
('chalk');
const tpl =
require
(path.
resolve
(__dirname,
'../template.json'))
;console.
log(chalk.
grey
('當前的模板列表如下: \n'))
console.
log(tpl)

//...
// 獲取對應模板名稱對應的 url
let url = tpl[templatename]
;console.
log(chalk.
white
('\n 開始生成專案…… \n'))
;//出現載入圖示
const spinner =
ora();
spinner.
start()
;download
(url,projectname,err =>
// 結束載入
spinner.
succeed()
; console.
log(chalk.
green
('\n 構建完成.'))
console.
log(
'\n to get started'
) console.
log(
`\n cd 
$\n`);
return
true;}
);

好，整個的腳手架工具構建呢，就基本大功告成，當然目前也有很多其他的yomen等腳手架，直接生成腳手架工具模板，也是一種很不錯的選擇；基本的思路呢，就是想辦法獲取使用者輸入的資訊，並且通過這些資訊，拉取對應的遠端倉庫構建本地的專案內容；

開發構建腳手架命令列工具總結

腳手架的開發總結

ODOO 13 WINDOWS的腳手架命令列的處理

使用Vue cli腳手架工具構建Vue專案

開發構建腳手架命令列工具總結

腳手架的開發總結

ODOO 13 WINDOWS的腳手架命令列的處理

使用Vue cli腳手架工具構建Vue專案

相關推薦