前端開發(fā)需要了解的一些工具，這些工具能夠幫助你在項目開發(fā)中事半功倍。

1.?nrm:?npm?registry 管理器

registry:?npm?遠程倉庫的地址。

由于眾所周知的原因，npm?官方倉庫在國內特別的慢，所以我們需要用一些替代性方案，一種方案就是切換?npm?registry 到國內的鏡像倉庫。

所以，一般我們會這樣做：

# 切換到淘寶 npm 倉庫
npm config set registry https://registry.npm.taobao.org/

但是這樣做會比較麻煩，因為切換的時候得記住 registry 的 url 地址。所以就需要?nrm?來管理?npm?registry。

安裝

npm install -g nrm

內置的 registry

npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror  https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/

使用

# 切換到 taobao registry
nrm use taobao

# 切換到 npm 官方 registry
nrm use npm

# 添加自己的 registry
nrm add yourName yourRegistry

2.?cnpm: 使用國內鏡像倉庫的?npm?客戶端

相當于是?npm?的一個克隆版本，它的命令中除了?publish?之外，其他的與?npm?的命令一致。內部默認使用的是國內的?npm?代碼倉庫?https://cnpmjs.org/，當然你也可以改為自己的。

如果你不喜歡使用?nrm?切換?npm?registry，可以把?npm?和?cnpm?這兩者一起用。

另外，它一般還會和?cnpmjs.org?配合使用。

安裝

npm install -g cnpm

3.?yarn: 類似?npm?的依賴管理工具

類似?npm?的依賴管理工具，但?yarn?緩存了每個下載過的包，所以再次使用時無需重復下載，同時利用并行下載以最大化資源利用率，因此安裝速度更快。

并且在開發(fā)?react-native?應用程序時，是強烈建議使用?yarn?的，因為如果非要用 npm, 必須使用 npm < 5 版本。

安裝

npm install -g yarn

4.?webpack: 前端打包工具

現(xiàn)在前端打包基本上都會用?webpack，它不僅能打包源代碼文件（如?js, css, html, ts, ...），還能打包靜態(tài)資源文件（如?images, fonts, ...），并且還能打包按需加載 SPA 應用。總之，webpack?是前端打包的不二選擇。

安裝

# 全局
npm install -g webpack

# 本地
npm install --save-dev webpack

5.?babel: es6 -> es5 轉碼器

有?babel?在，你就可以寫最新版的 JavaScript 語法（es6, es7, es2015, ...），然后由?babel?把你的源代碼轉碼成你所需要的 JavaScript 語法，比如瀏覽器端運行的?es5。babel?一般都是配合?webpack、rollup、parcel?等打包構建工具一起使用，詳細參考?babel - setup。

安裝

# 全局
npm install -g babel-cli

# 本地
npm install --save-dev babel-cli

6.JNPF

立足于低代碼開發(fā)技術，采用主流的兩大技術Java/.Net開發(fā)，可一站式開發(fā)多端使用Web、Android、IOS、微信小程序。專注低代碼開發(fā)，有拖拽式的代碼生成器，靈活的權限配置、SaaS服務，強大的接口對接，隨心可變的工作流引擎。支持多端協(xié)同操作，100%提供源碼，支持多種云環(huán)境部署、本地部署。

可一站式搭建：生產管理系統(tǒng)、項目管理系統(tǒng)、進銷存管理系統(tǒng)、OA辦公系統(tǒng)、人事財務等等。節(jié)省開發(fā)人員80%時間成本，并且有以構建業(yè)務流程、邏輯和數據模型等所需的功能。

安裝

https://www.yinmaisoft.com/?from=csdn

?

7.?eslint: js 語法（包括 jsx 語法）檢查與矯正

這個工具能夠檢查 js 語法（包括 jsx 語法），然后最大程度的矯正不符合規(guī)范的代碼。對于提升個人代碼質量，保證團隊代碼規(guī)范和代碼風格是相當有用的。

eslint?一般會配合?husky?與?lint-staged?一起使用。詳細用法可以參考?怎樣提升代碼質量。

安裝

# 全局
npm install -g eslint

# 本地
npm install --save-dev eslint

8.?stylelint: css 語法（包括 less, scss 語法）檢查與矯正

這個工具能夠檢查 css 語法（包括 less, scss 語法），然后最大程度的矯正不符合規(guī)范的代碼。對于提升個人代碼質量，保證團隊代碼規(guī)范和代碼風格是相當有用的。

stylelint?一般會配合?husky?與?lint-staged?一起使用。詳細用法可以參考?怎樣提升代碼質量。

安裝

# 全局
npm install -g stylelint

# 本地
npm install --save-dev stylelint

9.?prettier: 代碼格式優(yōu)化

這個工具能夠優(yōu)化?js, jsx, ts, css, less, scss, json, md, ...，對于保證團隊代碼風格是相當有用的。

prettier?一般會配合?husky?與?lint-staged?一起使用。詳細用法可以參考?怎樣提升代碼質量。

安裝

# 全局
npm install -g prettier

# 本地
npm install --save-dev prettier

10.?gulp: 基于流的自動化構建工具

在?webpack?出現(xiàn)之前，前端的構建任務很多都是由?gulp?來完成的。webpack?出現(xiàn)之后，gulp?在打包構建這一塊功能則退居二線，但是?webpack?只負責代碼打包，很多其他工作還是由?gulp?來完成，比如上傳打包文件到服務器，讓打包文件進行更多流操作等。所以，很多情況下都是?gulp?與?webpack?配合使用。

安裝

# 全局
npm install -g gulp

# 本地
npm install --save-dev gulp

11.?jest: js 測試庫

在 Facebook 內部，包括?react?應用在內的所有 JavaScript 代碼都是用?jest?來測試的。它的一個理念就是提供一套完整集成的 “零配置” 測試體驗。所以，使用?jest?來測試 JavaScript 是一件很愉快的事情。

安裝

npm install --save-dev jest

12.?enzyme:?react?組件測試庫

jest?只是單純用來測試 JavaScript 的，而?react?組件的測試，就需要用到 airbnb 出品的?enzyme?了。一般?enzyme?會和?jest?一起使用。

安裝

npm install --save-dev enzyme enzyme-adapter-react-16

13.?react-devtools: chrome 開發(fā)者工具插件 for?react

這是專門針對?react?組件開發(fā)的 chrome 開發(fā)者工具插件，就像開發(fā)者工具的?Elements?一樣，可以查看整個頁面的?react?組件樹和每個組件的屬性和狀態(tài)，并且可以動態(tài)的更改屬性和狀態(tài)，然后會更新 UI 到應用上。

安裝

通過 chrome 應用商店安裝?chrome - react-developer-tools.

其他安裝方式查看?react-devtools.

14.?redux-devtools?與?redux-devtools-extension: chrome 開發(fā)者工具插件 for?redux

這是專門針對?redux?開發(fā)的 chrome 開發(fā)者工具插件，就像?react-devtools?一樣，可以查看整個頁面的?redux?store 及其變化，并且可以動態(tài)的派發(fā)?action，然后會更新 UI 到應用上。

14.?vue-devtools: chrome 開發(fā)者工具插件 for?vue

這是專門針對?vue?組件開發(fā)的 chrome 開發(fā)者工具插件，就像開發(fā)者工具的?Elements?一樣，可以查看整個頁面的?vue?組件樹和每個組件的?data，并且可以動態(tài)的更改?data，然后會更新 UI 到應用上。

安裝

通過 chrome 應用商店安裝?chrome - vuejs-devtools.

其他安裝方式查看?vue-devtools.文章來源地址http://www.zghlxwxcb.cn/news/detail-534162.html

到了這里，關于前端開發(fā)需要了解的工具集合的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！