使用typescript快速開發(fā)一個cli的實現(xiàn)示例
cli 的全稱 command-line interface（命令行界面），也就是前端同學(xué)常用的腳手架，比如 yo、vue cli、react cli 等。
cli 可以方便我們快速創(chuàng)建項目，下圖是引用 vue cli 的介紹：
創(chuàng)建項目
運行下面的命令，創(chuàng)建一個項目：
npm init
執(zhí)行命令完成后，可以看到項目根目錄只有一個 package.json 文件。
在 package.json 文件增加 bin 對象，并指定入口文件 dist/index.js。
在命令行運行需要在入口文件的第一行增加 #!/usr/bin/env node，告訴系統(tǒng)用 node 運行這個文件。
{
"name": "cli-demo",
"version": "0.0.1",
"description": "cli demo",
"keywords": [
"cli"
],
"bin": {
"cli-demo": "dist/index.js"
}
...
}
安裝依賴
命令行工具，也會涉及到用戶交互的動作，那么 node.js 是怎么實現(xiàn)呢？早有大佬提供了非常好的庫，我們只要拿過來用，主要有兩個庫：
將這兩個庫安裝到項目里：
yarn add commander inquirer
由于是用 typescript 開發(fā)，再通過 rollup 打包，先安裝相關(guān)的依賴庫：
yarn add typescript rollup rollup-plugin-terser rollup-plugin-typescript2 @types/inquirer -D
配置
由于是用 typescript 開發(fā)，首先需要配置一下 tsconfig.json。
{
"compilerOptions": {
"target": "ES6",
"module": "ESNext",
"sourceMap": false,
"declaration": false,
"outDir": "./dist",
"moduleResolution": "Node",
"esModuleInterop": true,
"resolveJsonModule": true,
"removeComments": false,
"importHelpers": true,
"strict": true,
"lib": ["ES6", "DOM"]
},
"include": ["src"]
}
接下來在根目錄增加一個 rollup.config.js，把 typescript 代碼編譯成 javascript 代碼。前面提到的要在第一行增加 #!/usr/bin/env node 來告訴系統(tǒng)用 node 運行，那么可以在 rollup.config.js 的 banner 選項，把 #!/usr/bin/env node 寫在最前面。
import typescript from 'typescript'
import json from '@rollup/plugin-json'
import { terser } from 'rollup-plugin-terser'
import typescript2 from 'rollup-plugin-typescript2'
import { dependencies } from './package.json'
const external = Object.keys(dependencies || '')
const globals = external.reduce((prev, current) => {
const newPrev = prev
newPrev[current] = current
return newPrev
}, {})
const defaultConfig = {
input: './src/index.ts',
output: {
file: './dist/index.js',
format: 'cjs',
banner: '#!/usr/bin/env node',
globals
},
external,
plugins: [
typescript2({
exclude: 'node_modules/**',
useTsconfigDeclarationDir: true,
typescript,
tsconfig: './tsconfig.json'
}),
json(),
terser()
]
}
export default defaultConfig
實現(xiàn)一個簡單的 cli
在根目錄創(chuàng)建一個 src 文件夾，然后再創(chuàng)建一個 index.ts。
添加引用
添加引用并實例化 Command 對象。
import { Command } from 'commander'
import pkg from '../package.json'
const program = new Command(pkg.name)
自定義命令
實現(xiàn)一個可交互的自定義命令，模擬在終端（命令行）的登錄功能。使用 command 方法創(chuàng)建一個命令，description 可以用來描述這個命令的作用，登錄處理邏輯則寫在 action 方法里。最后使用 parse(process.argv) 方法，解析命令。更多詳細(xì)介紹和使用，可移步：https://github.com/tj/commander.js/blob/master/Readme_zh-CN.md。
program
.command('login')
.description('模擬登錄。')
.action(() => {
handleLogin()
})
program.parse(process.argv)
交互的話，用到前面說的 inquirer 庫，接收輸入的用戶名和密碼。選項的 type 的值有 input、password、number、checkbox、editor、list、rawList、expand、confirm，選項 name 是 inquirer.prompt 方法返回的對象，選項 validate 可用來驗證輸入是否符合規(guī)則。更多詳細(xì)介紹和使用，可移步：https://github.com/SBoudrias/Inquirer.js/blob/master/README.md
如果選項 type 是 password，可通過 mask 設(shè)置掩碼。
const handleLogin = () => {
// 配置交互的用戶名和密碼
const prompt = [
{
type: 'input',
name: 'userName',
message: '用戶名：',
validate: (value: string) => value.length > 0 || '用戶名不能為空'
},
{
type: 'password',
name: 'password',
message: '密碼：',
mask: '🙈 ',
validate: (value: string) => value.length > 0 || '密碼不能為空'
}
]
inquirer.prompt(prompt).then(({ userName, password }) => {
if (userName === 'demo' || password === '123456') {
console.log('登錄成功')
return
}
console.log('用戶名或密碼錯誤')
})
}
其他
一個 cli 工具，幫助信息也是必須的，可以通過 on('--help') 修改自定義幫助信息。
必須在 parse 方法之前。
program.on('--help', () => {
console.log('\n運行 cli-demo -h | --help 查看命令使用。\n')
})
然后再來修改一下，沒有輸入任何參數(shù)的時候，會出現(xiàn)錯誤，可以使用 exitOverride 方法重新退出，在終端（命令行）輸出幫助信息。
program.exitOverride()
try {
program.parse(process.argv)
} catch (error) {
program.outputHelp()
}
到這里，一個簡單的 cli 工具完成了，先本地來測試下看看。在終端（命令行）輸入 npm link，生成一個全局軟連接，可以方便調(diào)試和測試。
到此這篇關(guān)于使用typescript快速開發(fā)一個cli的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)typescript開發(fā)cli內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
正如標(biāo)題所言如何對table的td進行相同內(nèi)容合并，下面為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯過2013-12-12
2008-02-02
模仿jQuery，創(chuàng)建幾個包裹節(jié)點的方法，發(fā)現(xiàn)jQuery的方法很低效啊，下一次他又可以說這幾個方法可以提升了多少多少了。2010-02-02
解決layui數(shù)據(jù)表格排序圖標(biāo)被超出的表頭擠出去的問題
今天小編就為大家分享一篇解決layui數(shù)據(jù)表格排序圖標(biāo)被超出的表頭擠出去的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了js基于canvas實現(xiàn)時鐘組件的方法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
試想一下：出現(xiàn)了某個bug，有人用幾分鐘就搞定了，有人用了半天或者一天都找不到原因所在。你愿意當(dāng)前者還是后者呢？想當(dāng)前者的就請好好看完本篇文章吧。文中涉及較多Gif演示動畫請注意。2016-07-07
在使用bootstrap table的復(fù)選框功能的時候，由于采用服務(wù)端分頁，當(dāng)在第一頁選擇了某些數(shù)據(jù)，然后點擊第二頁選擇一些數(shù)據(jù)，再次點回第一頁，發(fā)現(xiàn)原先選擇的數(shù)據(jù)已經(jīng)清空了，原來的多選框并不支持翻頁保留多選數(shù)據(jù)，怎么解決呢，下面小編給大家分享下解決思路2017-03-03
微信小程序中進行地圖導(dǎo)航功能的實現(xiàn)方法
這篇文章主要介紹了微信小程序中進行地圖導(dǎo)航功能的實現(xiàn)方法,需要的朋友可以參考下2018-06-06
JavaScript之a(chǎn)ppendChild、insertBefore和insertAfter使用說明
這幾天需要用到對HTML節(jié)點元素的刪/插操作，由于用到insertBefore方法的時候遇到了一些麻煩，現(xiàn)在作為知識的整理，分別對appendChild、insertBefore和insertAfter做個總結(jié)2010-12-12
用戶可能從Excel或者其他地方直接復(fù)制粘貼,這時候提交到后端會導(dǎo)致獲取的用戶輸入中包含一些特殊的不可見字符,本文主要介紹了js正則校驗特殊的不可見字符的具體實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-06-06