資訊專欄INFORMATION COLUMN
摘要：項(xiàng)目已經(jīng)開源在上，名字叫做一開始想起名叫哈士奇后來這個(gè)名字被占了無奈臉。
如今前端工程化，自動(dòng)化已經(jīng)成為了新趨勢(shì)，如果我們要重新開始做一個(gè)項(xiàng)目，你會(huì)花費(fèi)多久的時(shí)間在前期環(huán)境的搭建上呢？在我們前端的的積累中，我們需要將這些技術(shù)沉淀下來，便于我們開始一個(gè)新的項(xiàng)目，而不必花費(fèi)過多的經(jīng)歷在環(huán)境搭建中。
這次我做的是一個(gè)felint 是一個(gè)集成了 eslint、stylelint、git hook 的前端代碼檢查工具。項(xiàng)目已經(jīng)開源在github上，名字叫做oishi,一開始想起名叫husky(哈士奇),后來這個(gè)名字被占了(無奈臉)。
先來理一下我們這個(gè)工具需要做什么事情
需要讓他初始化eslint,stylelint的配置文件
安裝好我們需要的依賴
掛載git鉤子，在代碼提交時(shí)進(jìn)行進(jìn)行eslint檢查
有了目標(biāo)我們開始實(shí)現(xiàn)我們這樣的一個(gè)工具：
準(zhǔn)備工作
這次我們采用commander來開發(fā)我們的命令行，
利用chalk來美化我們控制臺(tái)的輸出，
利用shelljs來執(zhí)行我們文件中的一些腳本
在本地調(diào)試時(shí)需要在package.json中配置bin選項(xiàng)，然后開發(fā)好后npm link 發(fā)布到本地的全局，就可以開始使用自己的命令行了
2.進(jìn)入正題
對(duì)于之前提到的第一點(diǎn)，我們首先要有自己的一個(gè)配置，在初始化的時(shí)候?qū)⑺聛恚覀冊(cè)谶@里將自己的配置扔到了github的倉(cāng)庫(kù)中，可以參考一下我的項(xiàng)目目錄配置文件,從github上拉下來后利用node原生的fs模塊讀寫配置文件。
我們所需要的依賴項(xiàng)目也都會(huì)記錄在配置文件中，讀取文件后與當(dāng)前目錄下的package.json對(duì)比一下，利用shell執(zhí)行安裝缺少的依賴即可
掛載git鉤子，有兩種方式，第一種，我們可以自己寫一個(gè)pre-commit,也可以安裝pre-commit npm包，我們這里采用了第一種方式，也是因?yàn)閟hell腳本比較通用，到此為止，我們?cè)诒镜匾呀?jīng)開發(fā)完成了一個(gè)命令行
3.結(jié)尾工作
我們?cè)趎pm上注冊(cè)一個(gè)自己的賬號(hào)，然后切換到項(xiàng)目目錄下，
npm login
npm publish
這篇文章中沒有涉及過多的技術(shù)細(xì)節(jié)，只說了大體上的一些實(shí)現(xiàn)思路，具體的代碼有興趣的朋友可以clone下我的項(xiàng)目,具體一些技術(shù)上的實(shí)現(xiàn)細(xì)節(jié)請(qǐng)?jiān)谖业膅ithub中留言。
覺得有幫助的可以區(qū)點(diǎn)一下star
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90254.html
摘要：可以使用或來安裝我用來重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個(gè)畫面，安裝完成了。 初步搭建腳手架 Tips 任何不錯(cuò)的開源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。 什么是 CLI 命令行界面（英語(yǔ)：command-li...
摘要：可以使用或來安裝我用來重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過度依賴中可以寫成放哪都行，可以寫成可以寫成看到這個(gè)畫面，安裝完成了。 初步搭建腳手架 Tips 任何不錯(cuò)的開源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。 什么是 CLI 命令行界面（英語(yǔ)：command-li...
摘要：從零開始搭建一個(gè)項(xiàng)目一搭建一個(gè)可靠成熟的項(xiàng)目介紹我是去年六月份接觸的，當(dāng)時(shí)還是個(gè)菜逼，當(dāng)然現(xiàn)在也是，寫了一年，抄代碼的時(shí)候一直是，在別人的框架基礎(chǔ)上開發(fā)，然后漸漸發(fā)現(xiàn)很多的模板都各有優(yōu)點(diǎn)，所以慢慢的開始集合到了一起。 從零開始搭建一個(gè)vue項(xiàng)目 -- vue-cli/cooking-cli（一） 1.vue-cli搭建一個(gè)可靠成熟的項(xiàng)目 1.介紹 vue-cli 我是去年六月...
摘要：如何為你的項(xiàng)目添加配置如何為你的項(xiàng)目添加配置現(xiàn)在已經(jīng)是年了，網(wǎng)上許多教程和分享帖都已經(jīng)過期，照著他們的步驟來會(huì)踩一些坑，如已經(jīng)不再維護(hù)，以及之后文件只剩下部分等。如有疑問或授權(quán)協(xié)商請(qǐng)與我聯(lián)系。如何為你的 Vue 項(xiàng)目添加配置 Stylelint 現(xiàn)在已經(jīng)是 9102 年了，網(wǎng)上許多教程和分享帖都已經(jīng)過期，照著他們的步驟來會(huì)踩一些坑，如 stylelint-processor-html 已經(jīng)不...
摘要：優(yōu)化代碼拆分從入口文件開始，遞歸地構(gòu)建了整個(gè)應(yīng)用的模塊依賴圖表，然后通常會(huì)將所有的模塊打包成一個(gè)。 如果你還不知道什么是React，請(qǐng)點(diǎn)擊這里github源碼 安裝Node.js 如果你還不知道什么是ECMAScript，請(qǐng)點(diǎn)擊這里 如果你還不知道什么是Node.js，請(qǐng)點(diǎn)擊這里 下載Node.js并安裝；接著打開windows命令行窗口分別輸入node -v及npm -v如下圖所示，...
閱讀 2566·2023-04-26 01:44
閱讀 2577·2021-09-10 10:50
閱讀 1420·2019-08-30 15:56
閱讀 2286·2019-08-30 15:44
閱讀 525·2019-08-29 11:14
閱讀 3429·2019-08-26 11:56
閱讀 3025·2019-08-26 11:52
閱讀 921·2019-08-26 10:27
