溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“怎么實現一個Node.js-CLI開發工具”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
首先，我們要打開CLI界面，用npm初始化一個項目：
npm init
package.json
{ "name": "mycli", "version": "1.0.0", "description": "A cli-demo", "main": "index.js", "author": "xmanlin", "license": "MIT"}里面一些用不上都已經去掉。
相信很多小伙伴在使用 npm 初始化項目的時候，或者在用 Vue CLI 搭建項目的時候，會發現它們有一個共同點——都有自己個性化的命令，感覺有點酷炫。那么我們怎么才能實現自己的命令呢，很簡單，在 package.json 添加 bin ：
{ "name": "mycli", "version": "1.0.0", "description": "A cli-demo", "main": "index.js", "bin": {"mycli": "./index.js"
}, "author": "xmanlin", "license": "MIT"}package.json中的 bin 的作用就是可以讓設置的 mycli 成為一個可執行命令，而命令所執行的文件就是后面的 index.js ，這些都可以根據自己的想法來定。接著我們要繼續對 index.js 進行修改：
index.js
#!/usr/bin/env nodeconsole.log("執行成功")這里的第一行很重要，這里表明 index.js 是 node 可執行文件。
設置完成后，就可以全局安裝我們的CLI工具了:
npm install -g
+ mycli@1.0.0added 1 package from 1 contributor in 0.12s
可以看見全局安裝成功，最后我們試試我們的命令：
mycli
輸出：
執行成功
剛剛小伙伴們在進行命令行操作的時候，使用了不同選項的命令，例如 npm init 、 npm install -g ，其中包含一些交互式的，比如在初始化項目時， npm init 提供一些輸入問答形式的命令。接下來，我們就來為自己的CLI工具添加這些類似的命令。
我們可以依賴兩個庫進行我們的開發：commander.js和Inquirer.js
commander.js：完整的 node.js 命令行解決方案。我們可以利用它，快速的編寫我們的命令行，自定義化操作。
Inquirer.js：是常規交互式命令行用戶接口的集合，提供給 Node.js 一個方便嵌入，漂亮的命令行接口。我們可以用來快速進行交互式命令行的編寫。
這兩個庫的具體用法，這里就過多的介紹，小伙伴們可以點擊上面名字的鏈接去熟悉一下，花不了太多時間，實際用起來也不難，后面那個沒有中文Readme，但是不妨礙大家會搜索呀~對不對。
我們首先來實現類似于 npm -v、node -v這樣類似的命令選項。
首先安裝commander.js：
npm install commander
然后引入 commander.js 并對 index.js 進行修改
#!/usr/bin/env nodeconst { program } = require('commander');// 字符串分割為數組的方法function strToArr(value, preValue){return value.split(',')
}// cli版本program.version(require('./package').version, '-v, --version', 'cli的最新版本');// 設置選項program
.option('-d, --debug', '調試一下')
.option('-l, --list <value>', '把字符串分割為數組', strToArr)
.action((options, command) => {// 進行邏輯處理if(options.debug) {console.log("調試成功")
}if(options.list !== undefined) {console.log(options.list)
}
});// 處理命令行輸入的參數program.parse(process.argv);我們來試試剛剛設置的命令選項：
mycli -d
輸出：
調試成功
輸入：
mycli -l 1,2,3
輸出：
[ '1', '2', '3' ]
在commander.js里面已經給我們定義好了 --help 選項：
mycli -h
輸出：
Usage: index [options] Options: -v, --version cli的最新版本 -d, --debug 調試一下 -l, --list <value> 把字符串分割為數組 -h, --help display help for command
利用 --help 選項，我們可以很清楚的了解到 mycli 中已有多少命令。
在項目開發中，我們有時會用到類似于 npm run xxx 這樣的命令，其中run就相當于npm的子命令。這里我們也可以給mycli設置類似的子命令：
const { program } = require('commander');
...// 創建文件命令行program
.command('create <filename>')
.description('創建一個文件')
.action((filename) => {console.log(filename)
})
...// 處理命令行輸入的參數program.parse(process.argv);command('create <filename>') 就是創建了一個 mycli 的 create 子命令，后面跟了一個必填參數。
輸入：
mycli create file
輸出
file
子命令創建成功。
我們現在能夠定義選項，設置命令了。接下來我們就可以實際做點東西，利用命令行來創建項目的文件。
簡單的設計一個流程：
我們先來創建一個templates文件夾，然后在里面寫幾個常見的模板文件，這里的模板文件運用到了模板字符串，結構如下：
reactClass.js
module.exports = function (className) {return `import * as React from 'react';export class ${className} extends React.Component{constructor(props){super(props);this.state = {}
}componentDidMount(){
}render() {return (<div></div>)
}
}`
}vueTemplate.js
module.exports = function () {
return `<template><div></div></template><script>export default {data() {return {}
}methods: {
}
}
</sctipt><style lang="scss" scoped></style>`
}index.js
const reactClass = require('./reactClass');const vueTemplate = require('./vueTemplate');module.exports = [
{ name: 'reactClass', src: reactClass },
{ name: 'vueTemplate', src: vueTemplate }
]模板文件創建完成后，我們先把它放在一邊，待會兒才用的上。
當我們輸入 mycli create file 命令后，需要得到下圖中的效果，我們可以手動上下進行選擇，也就是可以被稱為交互式的命令。
這里就要用到我們上文中提到的另外一個庫——Inquirer.js
首先肯定需要進行安裝
npm install inquirer
引入并修改我們根目錄下的index.js：
#!/usr/bin/env nodeconst { program } = require('commander');const inquirer = require('inquirer');// 引入模板文件const templates = require('./templates/index');// 命令行選擇列表let prompList = [
{type:'list',name: 'template',message: '請選擇你想要生成的模板？',choices: templates,default: templates[0]
}
]
...// 創建文件命令行program
.command('create <filename>')
.description('創建一個文件')
.action(async (filename) => {const res = await inquirer.prompt(prompList)console.log(res)
})// 處理命令行輸入的參數program.parse(process.argv);接下來我們在命令行中輸入：
mycli create file
就可以得到上面所展示的效果
然后選擇第一個后回車：
可以看到輸出了我們所選擇模板的名字。接下來就是進行實際文件的創建。
創建文件則需要調用node.js的fs相關api，然后修改index.js：
// 處理文件const fs = require("fs");
...// 創建文件命令行program
.command('create <filename>')
.description('創建一個文件')
.action(async (filename) => {const res = await inquirer.prompt(prompList)if(res.template === 'reactClass') {
templates.forEach((item) => {if(item.name === 'reactClass') {
fs.writeFile(`./${filename}.jsx`, item.src(filename), function(err) {if(err) {console.log('創建失敗：', err)
} else {console.log(`創建文件成功！${filename}.jsx`);
}
})
}
})
}if(res.template === 'vueTemplate') {
templates.forEach((item) => {if(item.name === 'vueTemplate') {
fs.writeFile(`./${filename}.vue`, item.src(), function(err) {if(err) {console.log('創建失敗：', err)
} else {console.log(`文件創建成功！${filename}`);
}
})
}
})
}
})
...我們再次在命令行中輸入mycli create file，然后選擇一個模板。
輸出：
創建文件成功！file.jsx
同時我們可以看見項目根目錄下面新增了一個file.jsx文件：
打開file.jsx可以看見文件的類名也進行了相應的填寫。不僅如此，因為我們的mycli是全局安裝的，所以可以說在電腦中任何位置，只要我們輸入 mycli create file ，我們在當前目錄下都能獲取到file.jsx文件。也就意味著，我們在開發一些項目的時候，不用在復制粘貼，刪刪改改。
直接一行命令就能搞定了~
既然能創建文件，那么能否創建文件夾？答案是肯定的，只需要繼續添加命令就行：
...// 創建文件夾命令行program
.command('create-f <folder>')
.description('創建一個文件夾')
.action((folder) => {if(fs.existsSync(folder)) {console.log('文件夾已存在')
} else {
fs.mkdirSync(folder);console.log('文件夾創建成功')
}
});
...然后在命令行中輸入mycli create-f xxx ，同樣可以創建想要命名文件夾。
“怎么實現一個Node.js-CLI開發工具”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
