項目中的配置文件都是幹嘛的?

語言: CN / TW / HK

大家好,我是東東吖。又到週末了,最近工作有點忙,但是我還是會保持每週給大家更新文章的,本文主要講述項目中的配置文件的作用以及使用方法。

1、.gitignore

ignore:忽略的意思。顧名思義,這個配置文件是用來管理git的,當你把文件名寫入這個文件,這個文件就會被忽略,不會被提交,當你把文件夾名寫入這個文件,那麼整個文件夾都會被忽略,不會被提交。為啥要這個配置文件呢?你想一想,我們下載的依賴包多大?這樣的大文件肯定不能提交到git上去,而是提交上去了在線上部署下依賴包。還有類似小程序啊,由於包限制,我們會選擇把一些靜態文件資源放在線上訪問,不會把前端本地的資源文件提交上去、放在本地只是方便我們調試和備份。

image.png

2、.eslintrc.js

這個配置文件是用來管理eslint規則的,在多人開發中,如果你沒有設置eslint,而別人開啟eslingt了,那對於別人是災難性的,就拿我們公司的項目來説,這個項目是一個公眾號,主要是用來支付的,由於沒有太多業務邏輯,所有有整整一年沒有更新了,裏面一堆eslingt錯誤,也沒有人管。而我最近要在這個項目上做一些人臉識別,活體檢測,反洗錢等安全措施,每次修改一行代碼,項目要跑10多秒,一點都沒誇張,看着一大堆eslint錯誤,我腦殼真的頭疼。

解決方法: 你可以用腳本自動檢測和修改語法錯誤,親測有效。但是隻能修改一本部分。在package.json的script中加入這兩句腳本運行即可。 image.png

再來看這個配置文件,裏面的rules就是用來規定相關規則的。 - "off"  或 0 - 關閉這個規則檢查 - "warn"  或 1 - 開啟這個規則檢查並提示(不影響退出狀態) - "error"  或 2 - 開啟規則檢查並報錯 image.png

舉個例子,我們運行項目: image.png 這裏報了eslint錯誤,報的意思是期待使用'===',而實際用的'==',這個規則的關鍵字在roles/後面,也就是eqeqed。我們在配置文件中配置 'eqeqeq':0,再次運行,就看不見這個錯誤了。

image.png

還有一個問題,如何不把它的規則關閉,就要修改正確,怎麼快速找到eslint錯誤在項目中的位置,並修改呢?

image.png

和我們項目名同目錄有一個NPM腳本,點開找到對應的腳本允許,控制枱就會打印對應的eslint錯誤這個時候我們就可以按住crtr鍵,點擊對應的eslint錯誤,vscode就會自動幫我們跳到eslint對應的文件夾錯誤位置,按照要求修改正確即可。

image.png

3、.eslintignore

顧名思義,這個配置文件是用來管理eslint需要忽略的文件的,寫入這個配置裏面的文件或者文件夾不會被eslint檢測到,和.gitignore作用類似。

image.png

4、package.json

這個配置文件是用來管理包和腳本的。比如我們剛剛在這個配置文件加入了兩行腳本,之後運行 npm run checklint 就可以檢測錯誤,運行npm run reviselint就可以自動修改部分selint錯誤。

image.png

5.package-lock.json

lock:鎖的意思,在街舞中有一種舞種就叫lockking,顧名思義這個文件是用來鎖住包的,他會下載指定包的版本。

6.README.md

這是一個自訴文件,可以用來描述怎麼跑這個項目,用到哪些技術等等。

image.png

7.favicon.icon

image.png 這個就是我們地址欄的icon圖標,如果你需要替換,比如我們掘金的是一個鎖,把鎖的圖片命名成這個favicon.icon,替換項目中的圖片即可。這裏有時候會有緩存,記得刷新即可。

image.png

8、 index.html

image.png 這裏主要是用來配置項目地址欄的title的,比如我修改title為東東吖,項目運行後就會顯示東東吖。也可以在這個配置文件預加載一些資源文件。

image.png

當然,這些只是最基礎的配置文件,後續我還會繼續分享其他配置文件並補充在這篇文章中。記得關注點贊收藏吖,後續補充之後我會提醒你們的。今天的分享就到這裏吧!

筆者往期好文:

手把手教你利用XSS攻擊體驗一次黑客

組件通信的8種方式,你搞清楚了嗎?

從0到1學習Node.js系列教程(第一篇):API接口初體驗