用commander作一個本身的eslint腳手架

現在前端工程化，自動化已經成爲了新趨勢，若是咱們要從新開始作一個項目，你會花費多久的時間在前期環境的搭建上呢？在咱們前端的的積累中，咱們須要將這些技術沉澱下來，便於咱們開始一個新的項目，而沒必要花費過多的經歷在環境搭建中。

此次我作的是一個集成了 eslint、stylelint、git hook的前端代碼檢查工具。項目已經開源在github上，名字叫作oishi,一開始想起名叫husky(哈士奇),後來這個名字被佔了(無奈臉)。

先來理一下咱們這個工具須要作什麼事情

須要讓他初始化eslint,stylelint的配置文件 安裝好咱們須要的依賴 掛載git鉤子，在代碼提交時進行進行eslint檢查 有了目標咱們開始實現咱們這樣的一個工具：

1.準備工做

• 此次咱們採用commander來開發咱們的命令行，
• 利用chalk來美化咱們控制檯的輸出，
• 利用shelljs來執行咱們文件中的一些腳本 在本地調試時須要在package.json中配置bin選項，而後開發好後npm link 發佈到本地的全局，就能夠開始使用本身的命令行了

2.進入正題

1. 對於以前提到的第一點，咱們首先要有本身的一個配置，在初始化的時候將它拉下來，咱們在這裏將本身的配置扔到了github的倉庫中，能夠參考一下個人項目目錄配置文件,從github上拉下來後利用node原生的fs模塊讀寫配置文件。

2. 咱們所須要的依賴項目也都會記錄在配置文件中，讀取文件後與當前目錄下的package.json對比一下，利用shell執行安裝缺乏的依賴便可

3. 掛載git鉤子，有兩種方式，第一種，咱們能夠本身寫一個pre-commit,也能夠安裝pre-commit npm包，咱們這裏採用了第一種方式，也是由於shell腳本比較通用，到此爲止，咱們在本地已經開發完成了一個命令行,在咱們將咱們寫的pre-commit,移入到git hooks下面的時候，記得要加權限， chmod +x pre-commit

pre-commit如何編寫，相信網上有不少了，這裏我給一個大概的實現思路 首先是獲取到你要eslint的代碼，

JS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "(\.js?)$")
CSS_FILES=$(git diff --cached --name-only --diff-filter=ACM | grep -E "(\.p?css)$")
複製代碼

而後調用本身的eslint命令， oishi lintjs --exitcode $JS_FILES 最後判斷返回值， 有一個小坑的地方在於你的入口文件處，你要聲明一下本身的node路徑 #!/usr/bin/env node 3.結尾工做

咱們在npm上註冊一個本身的帳號，而後切換到項目目錄下，

npm login
npm publish
複製代碼

對於一些具體的技術細節能夠參見我項目中的源碼，也能夠在個人博客中評論留言