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