惠善一的博客：http://huishanyi.club/
通過命令列工具，初始化團隊專案，并生成團隊規范代碼，一鍵創建專案，一鍵生成代碼，一鍵生成功能模塊···
解放雙手，從 cli 開始， JSer 永不為奴！
創建專案目錄
兩種方法：
-
滑鼠右鍵創建檔案夾，檔案夾名稱即為專案名稱；
-
打開系統命令面板（powershell、cmd···），輸入命令：
-
mkdir 專案名稱
-
初始化 node 專案
在專案檔案目錄運行命令：
npm init
運行命令后會出現如下提示（按照提示完成即可）：
根據提示完成操作后，會在專案根目錄生成專案描述檔案package.json，可以回車跳過以下步驟，后續在package.json檔案中完善專案資訊，
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: 專案名稱
version: 版本號
description: 專案描述
entry point: (index.js)入口
test command: 測驗相關
git repository: git倉庫地址
keywords: 關鍵詞
author: 作者
license: 證書
About to write to E:\***\package.json:
{
"name": "***",
"version": "***",
"description": "***",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "***",
"license": "ISC"
}
Is this OK? (yes) yes
安裝相關依賴
專案后續會使用以下依賴包，
運行命令：
npm i commander download-git-repo ora handlebars figlet clear chalk open
依賴包介紹：
- commander（完整的 node.js 命令列解決方案）
- download-git-repo（從節點下載并提取倉庫（GitHub, GitLab, Bitbucket））
- ora（終端進度條）
- handlebars（輕量的語意化模板）
- figlet（終端實作圖形字體）
- clear（終端清屏）
- chalk（終端字串樣式）
- open（跨平臺級的，可打開 url、檔案、可執行腳本）
創建 cli 入口檔案
專案根目錄創建檔案夾bin，在bin檔案夾中創建mycli.js（自定義）檔案，
檔案內容如下：
#!/usr/bin/env node
// 第一行為約定腳本解釋器以 node 進行決議，必須放在檔案第一行！行首不能有任何字符！
定義執行命令
打開package.json檔案，添加相關代碼（句首有+號的代碼為新增代碼）：
{
"name": "***",
"version": "***",
"description": "***",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
+ "bin": {
+ "mycli": "./bin/mycli.js"
+ },
"author": "***",
"license": "ISC",
"dependencies": {
"chalk": "^4.1.0",
"clear": "^0.1.0",
"commander": "^6.2.0",
"download-git-repo": "^3.0.2",
"figlet": "^1.5.0",
"handlebars": "^4.7.6",
"open": "^7.3.0",
"ora": "^5.1.0"
}
}
映射命令至系統
將package.json檔案中剛添加的bin命令映射至系統中，
運行命令：
npm link
此時我們可以全域使用bin中的mycli命令了，
npm link機理：由于已經安裝好 node 環境，故此我們可以直接全域使用node與npm命令，而npm link則是將package.json中bin下的命令通過npm與系統環境變數橋接，所以我們可以全域使用bin中的命令，
至此我們實作了 cli 的第一步：可以全域使用我們自定義的命令了~~~
莫要問我為什么在這里用了彩色的字，，，
因為我比較————
騷！
定制命令列界面
在入口檔案bin => mycli.js中進行命令列界面定制，
#!/usr/bin/env node
const program = require('commander') // 引入 commander
program.version(require('../package.json').version) // 宣告 cli 當前版本，如：輸入mycli -V 命令，即可顯示當前 cli 版本
program
.command('init <name>') // 定義使用命令，如：命令 mycli init <name>
.description('init project') // 命令描述
.action(name => { // 該命令對應的動作
console.log('init--------'+name);
})
program.parse(process.argv) // 將命令引數暴露出去，供使用者使用
定制初始化功能
在根目錄中創建lib檔案夾，在lib檔案夾中創建init.js檔案，用于撰寫初始化功能代碼，
基礎結構搭建
初始化功能基礎代碼結構，
lib => init.js檔案代碼如下：
const { promisify } = require('util') // node 核心模塊 util，其中的 promisify 方法可以將異步回呼方法改造成回傳 Promise 實體的方法
const figlet = promisify(require('figlet')) // 以 promise 形式引入 figlet 模塊，figlet 可以式代碼以圖形出現在終端
const clear = require('clear') // 終端清屏
const chalk = require('chalk'); // 終端字串樣式定制
const colorLog = (content, color) => console.log(chalk[color||'green'](content));// 封裝日志輸出，可定制顏色
module.exports = async name => {
clear();
const data = https://www.cnblogs.com/yixin25/p/await figlet('Gisuni Welcome');
colorLog(data,'red')
}
連接功能與命令
bin => mycli.js對init方法進行引入并使用，代碼如下：
#!/usr/bin/env node
const program = require('commander') // 引入 commander
program.version(require('../package.json').version) // 宣告 cli 當前版本，如：輸入mycli -V 命令，即可顯示當前 cli 版本
program
.command('init <name>') // 定義使用命令，如：命令 mycli init <name>
.description('init project') // 命令描述
- .action(name => { // 該命令對應的動作
- console.log('init--------'+name);
- })
+ .action(require('../lib/init'))
program.parse(process.argv) // 將命令引數暴露出去，供使用者使用
下拉倉庫功能
將倉庫中的代碼下拉至本地，
在lib檔案夾中創建download.js檔案，其代碼如下：
const { promisify } = require('util') // node 核心模塊 util，其中的 promisify 方法可以將異步回呼方法改造成回傳 Promise 實體的方法
module.exports.clone = async (repo, desc) => {
const download = promisify(require('download-git-repo')) // 以 promise 形式引入 download-git-repo 模塊，download-git-repo 可以下拉倉庫代碼
const ora = require('ora') // 引入終端進度條代碼
const process = ora(`下載中··· ${repo}`) // 進度條提示
process.start() // 進度條開始
await download(repo, desc) // 下拉倉庫代碼
process.succeed() // 進度條結束
}
引入下拉功能
將下拉功能引入至初始化模塊中，
lib => init.js檔案代碼如下：
const { promisify } = require('util') // node 核心模塊 util，其中的 promisify 方法可以將異步回呼方法改造成回傳 Promise 實體的方法
const figlet = promisify(require('figlet')) // 以 promise 形式引入 figlet 模塊，figlet 可以式代碼以圖形出現在終端
const clear = require('clear') // 終端清屏
const chalk = require('chalk') // 終端字串樣式定制
const colorLog = (content, color) => console.log(chalk[color||'green'](content)) // 封裝日志輸出，可定制顏色
+const { clone } = require('./download') // 引入下拉功能模塊
module.exports = async name => {
clear();
const data = https://www.cnblogs.com/yixin25/p/await figlet('Gisuni Welcome');
colorLog(data,'red');
+ colorLog(`創建專案：${name}`);
+ await clone('github:用戶名/專案名稱', name); // 如果專案克隆地址為：https://github.com/ShanYi-Hui/react-template.git，則此處應改造為：github:ShanYi-Hui/react-template
}
自動安裝依賴
下拉的專案將自動安裝依賴包，
lib => init.js檔案代碼如下：
const { promisify } = require('util') // node 核心模塊 util，其中的 promisify 方法可以將異步回呼方法改造成回傳 Promise 實體的方法
const figlet = promisify(require('figlet')) // 以 promise 形式引入 figlet 模塊，figlet 可以式代碼以圖形出現在終端
const clear = require('clear') // 終端清屏
const chalk = require('chalk') // 終端字串樣式定制
const colorLog = (content, color) => console.log(chalk[color||'green'](content)) // 封裝日志輸出，可定制顏色
const { clone } = require('./download') // 引入下拉功能模塊
+const spawn = async (...args) => {
+ const { spawn } = require('child_process') // node 核心模塊 child_process，spawn 方法會異步地衍生子行程，且不阻塞 Node.js 事件回圈
+ return new Promise(resolve => {
+ const proc = spawn(...args);
+ proc.stdout.pipe(process.stdout);
+ proc.stderr.pipe(process.stderr);
+ proc.on('close', () => {
+ resolve();
+ })
+ })
+}
module.exports = async name => {
clear();
const data = https://www.cnblogs.com/yixin25/p/await figlet('Gisuni Welcome');
colorLog(data,'red');
colorLog(`創建專案：${name}`);
await clone('github:用戶名/專案名稱', name); // 如果專案克隆地址為：https://github.com/ShanYi-Hui/react-template.git，則此處應改造為：github:ShanYi-Hui/react-template
+ colorLog('安裝依賴中···');
+ await spawn(process.platform === 'win32'?'npm.cmd':'npm', ['install'], { cwd:`./${name}` }); // 安裝依賴
+ colorLog(`
+安裝完成！
+
+專案將自動啟動，若未啟動請執行如下命令:
+==============================
+ cd ${name}
+ npm run serve
+==============================
+ `);
+}
專案自啟動
依賴安裝完成后將自動打開瀏覽器，并在指定埠（默認 8080 埠）運行服務，
lib => init.js檔案代碼如下：
const { promisify } = require('util') // node 核心模塊 util，其中的 promisify 方法可以將異步回呼方法改造成回傳 Promise 實體的方法
const figlet = promisify(require('figlet')) // 以 promise 形式引入 figlet 模塊，figlet 可以式代碼以圖形出現在終端
const clear = require('clear') // 終端清屏
const chalk = require('chalk') // 終端字串樣式定制
const colorLog = (content, color) => console.log(chalk[color||'green'](content)) // 封裝日志輸出，可定制顏色
const { clone } = require('./download') // 引入下拉功能模塊
+const open = require('open') // 打開鏈接
const spawn = async (...args) => {
const { spawn } = require('child_process') // node 核心模塊 child_process，spawn 方法會異步地衍生子行程，且不阻塞 Node.js 事件回圈
return new Promise(resolve => {
const proc = spawn(...args);
proc.stdout.pipe(process.stdout); // 子行程中的日志通過管道傳輸至主行程
proc.stderr.pipe(process.stderr); // 子行程中的錯誤捕獲通過管道輸出至主行程
proc.on('close', () => { // 關閉子行程
resolve(); // promise 狀態切換至執行完成狀態
})
})
}
module.exports = async name => {
clear();
const data = https://www.cnblogs.com/yixin25/p/await figlet('Gisuni Welcome');
colorLog(data,'red');
colorLog(`創建專案：${name}`);
await clone('github:用戶名/專案名稱', name); // 如果專案克隆地址為：https://github.com/ShanYi-Hui/react-template.git，則此處應改造為：github:ShanYi-Hui/react-template
colorLog('安裝依賴中···');
await spawn(process.platform === 'win32'?'npm.cmd':'npm', ['install'], { cwd:`./${name}` }); // 安裝依賴
colorLog(`
安裝完成！
專案將自動啟動，若未啟動請執行如下命令:
==============================
cd ${name}
npm run serve
==============================
`);
+ open('http://localhost:8080'); // 打開指定埠
+ await spawn(process.platform === 'win32'?'npm.cmd':'npm', ['run','serve'], { cwd:`./${name}` }); // 啟動專案
}
其實到這里，一個最基本的 cli 已經制作完成了~~~
那么接下來將開始豐富它的功能！
更新中···
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/208297.html
標籤：JavaScript