初始化項(xiàng)目
npm init
執(zhí)行完成之后會(huì)在根目錄中生成一個(gè)package.json
安裝自己的cli所需要的庫(kù)
npm i commander download-git-repo ora handlebars figlet clear chalk open watch inquirer
執(zhí)行之后會(huì)生成package-lock.json文件
其中：
commander:設(shè)置一些node命令罚拟，如包的help檀轨、usage琐馆、version、parse輸入的參數(shù)
download-git-repo:下載git上的模板，并存到本地
ora:下載包時(shí)扯键，產(chǎn)生loading的圖標(biāo)
handlebars:模板引擎
figlet:輸出一些特殊的文字，這些文字只包含 ANSI 對(duì)應(yīng)的字符
clear:清除終端屏幕，相當(dāng)于Ctrl + L
chalk:可以修改輸出console顏色
open:打開在macOS圣拄，startWindows和xdg-open其他平臺(tái)上使用命令
watch:自動(dòng)監(jiān)聽文件變化
inquirer:用戶判斷，是否執(zhí)行
- 也可以根據(jù)自己的cli安裝自己需要的庫(kù)
Cli搭建
- 新建bin目錄
-
添加執(zhí)行的js文件毁欣，注意這里的js文件需要以#!/usr/bin/env node這個(gè)開頭庇谆，表明用node執(zhí)行
image 在package.json中新建bin對(duì)象,這里存放之后需要執(zhí)行的js文件
- 將包npm link到全局
npm link
由于我這里的權(quán)限不足報(bào)錯(cuò)，我使用了sudo npm link
- 這時(shí)候再執(zhí)行zwind命令凭疮，會(huì)發(fā)現(xiàn)執(zhí)行了zwind.js腳本饭耳，這就相當(dāng)于做了一個(gè)最簡(jiǎn)單cli工具
- 補(bǔ)全想要的功能
#! /usr/bin/env node
const program = require('commander')
program.version(require('../package.json').version)
program
.command('init <name>')
.description('init project ')
.action(name =>{
console.log('??完成添加' + name)
})
program.parse(process.argv)
提示功能,版本信息就這樣完成了
- 接下來新建lib文件夾，并添加init.js
#! /usr/bin/env node
const {promisify} = require ('util')
const figlet = promisify(require('figlet'))
const clear = require('clear')
const chalk = require('chalk')
const log = content => console.log(chalk.green(content))
const {clone} = require('./download')
module.exports = async name =>{
clear()
const data = await figlet ('zwind Welcome')
log(data)
//clone
log(`??創(chuàng)建項(xiàng)目 ${name}`)
await clone(`github:zwinds/vue-template`, name)
}
- 新建download.js
const {promisify} = require('util')
module.exports.clone = async function(repo,desc){
const download = promisify(require('download-git-repo'))
const ora = require('ora')
const process = ora(`正在下載....${repo}`)
process.start()
await download(repo,desc)
process.succeed()
}
這樣就實(shí)現(xiàn)了下面的效果执解，能夠從GitHub上下載模板
自動(dòng)安裝依賴
在init.js里添加
完成效果
自動(dòng)打開瀏覽器
const open = require('open')
open(`http://localhost:8080`)
//啟動(dòng)瀏覽器
await spawn ('npm',['run','serve'],{cwd:`./${name}`})
屬于自己的cli已經(jīng)基本完成
發(fā)布到npm
首先需要注冊(cè)npm賬號(hào)
在根目錄添加publish.sh
#!/usr/bin/env bash
set -e
# 修改npm源地址
npm config get registry
npm config set registry=http://registry.npmjs.org
# 登陸輸入自己的npm賬號(hào)和密碼寞肖，還有郵箱
echo '登錄'
npm login
echo "發(fā)布中..."
npm publish
# 改回npm源地址
npm config set registry=https://registry.npm.taobao.org
echo -e "\n發(fā)布成功\n"
exit
- 第一次發(fā)布版本
npm adduser
依次輸入賬號(hào)，密碼和郵箱
- 不是首次發(fā)布
npm login
- 發(fā)布到npm上
npm publish
依次輸入賬號(hào)衰腌，密碼和郵箱
npm發(fā)布中遇到的錯(cuò)誤信息
參考http://www.reibang.com/p/7bba18925fbf
1.使用npm config get registry 查看自己的鏡像源是哪個(gè)
鏡像源要設(shè)置為npm官方的 npm config set registry=http://registry.npmjs.org
npm ERR! code E403
npm ERR! 403 403 Forbidden -
PUT https://registry.npm.taobao.org/zwind-cli -
[no_perms] Private mode enable, only admin can publish this module
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/zwind/.npm/_logs/2020-06-24T00_22_26_729Z-debug.log
2.確保登錄的用戶賬號(hào)正確新蟆，再次使用npm login/npm adduser登錄
npm ERR! code E404
npm ERR! 404 Not Found - PUT http://registry.npmjs.org/zwind-cli - Not found
npm ERR! 404
npm ERR! 404 'zwind-cli@1.0.0' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/zwind/.npm/_logs/2020-06-24T00_33_28_324Z-debug.log
本項(xiàng)目Github地址：https://github.com/zwinds/zwind-cli
