開(kāi)發(fā)一個(gè)屬于自己的 web 服務(wù)器
嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾。
周二，又是分外充實(shí)的一天，在寫(xiě)代碼——改代碼——寫(xiě)代碼中平穩(wěn)度過(guò)。
今天在搭建業(yè)務(wù)的時(shí)候，又需要使用 web 服務(wù)器。
這一看，又得從 0 開(kāi)始。從下載搭建開(kāi)始，反反復(fù)復(fù)，真的太浪費(fèi)時(shí)間和精力了。
為了以后能愉快地摸魚(yú)提升效率，心一狠，算了，自己手動(dòng)擼一個(gè)發(fā)布到 npm 官網(wǎng)去，然后全局安裝下，下次使用就可以直接指令啟動(dòng)了。
創(chuàng)建開(kāi)始目錄
創(chuàng)建一個(gè)文件夾，起個(gè)花名 cwj-serve ，在這個(gè)目錄下創(chuàng)建一個(gè) bin 文件夾，里面新建一個(gè) serve.js 文件，內(nèi)容如下：
#!/usr/bin/env?node//-----package---const?boxen?=?require("boxen")const?express?=?require("express")const?app?=?express()app.use(express.static(process.cwd()));//---let?message?=?`????Serving!????????????????????????????????????????????-?Local:????????????http://localhost:9000????Copied?local?address?to?clipboard!`app.listen(9000,()=>{????console.log(boxen(message,{????????padding:?1,????????borderColor:?'green',????????margin:?1????}))})
這里是結(jié)合 express 搭建的 web server。它輕小便捷，且業(yè)務(wù)層面都已開(kāi)發(fā)出來(lái)，所以就直接上手了，小伙伴們可以按自己的需要來(lái)。當(dāng)然，思路都是一致的。
在這里強(qiáng)調(diào)一行代碼。
app.use(express.static(process.cwd()));
這行代碼的意思就是把當(dāng)前啟動(dòng)的終端目錄設(shè)定為靜態(tài)目錄。
完事之后，通過(guò) npm init -y 創(chuàng)建一個(gè) package.json 文件，然后在這個(gè) json 文件里補(bǔ)充一個(gè) bin 字段，屬性值是 “./bin/serve.js”，如下面內(nèi)容所示：
{??"name":?"cwj-serve",??"version":?"1.0.0",??"description":?"",??"main":?"index.js",??"bin":?{????"cwj-serve":?"./bin/serve.js"???//需要手動(dòng)添加??},??"scripts":?{??},??"keywords":?[],??"author":?"",??"license":?"ISC",??"dependencies":?{????"boxen":?"^4.2.0",????"express":?"^4.17.1"??}}
在終端下載 express boxen；下載指令 ?npm install express boxen
本地測(cè)試
代碼完成之后，暫時(shí)不要著急發(fā)布，需要本地測(cè)試一下，看是否成功。
通過(guò) npm link 軟連接到本地的 npm 目錄下，在桌面建立一個(gè)文件夾，命名為 demo。在里面添加一個(gè) index.html 文件，寫(xiě)個(gè) hello world 就行。
在這個(gè) demo 文件夾下啟動(dòng)終端直接輸入 cwj-serve?
回到瀏覽器輸入 http://localhost:9000 效果如下：
正式發(fā)布
測(cè)試沒(méi)有問(wèn)題之后，下一步就是發(fā)布到 npm 官網(wǎng)了。操作步驟流程如下：
先去 npm 官網(wǎng)注冊(cè)一個(gè)賬號(hào)
回到 cwj-serve 目錄的終端
npm login 登錄 npm
npm publish 直接發(fā)布
注意：發(fā)布之前一定要檢查自己的 .npmrc 的鏡像是不是 npm 的，一般都是淘寶鏡像。
成功之后，在瀏覽器的 npmjs.com 官網(wǎng)中找到個(gè)人中心，稍等幾分鐘就能找到自己發(fā)布的這個(gè) cwj-serve 包了。
測(cè)試是否成功
在桌面隨便創(chuàng)建一個(gè)文件夾，打開(kāi)終端全局安裝 cwj-serve ?npm i cwj-serve -g
再添加一個(gè) index.html 文件寫(xiě)點(diǎn)內(nèi)容
終端 cwj-serve 回車
效果如上圖 hello world 所示，那就表示成功了。
你就擁有了一個(gè)自己的專屬服務(wù)器(????)??。
推薦閱讀：
女?huà)z大戰(zhàn)蟲(chóng)族，背后到底有多少故事？
現(xiàn)代版戰(zhàn)國(guó)七雄爭(zhēng)霸，買菜大戰(zhàn)何時(shí)休？
前端人因?yàn)?Vue3 的 Ref-sugar 提案打起來(lái)了！
點(diǎn)點(diǎn)“贊”和“在看”，保護(hù)頭發(fā)，減少bug。