前端進階（8） - 前端開發需要了解的工具集合：webpack, eslint, prettier, ...

前端開發需要了解的工具集合：webpack, eslint, prettier, ...

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

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 緩存了每個下載過的包，所以再次使用時無需重復下載，同時利用并行下載以最大化資源利用率，因此安裝速度更快。

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

安裝

npm install -g yarn

4. webpack: 前端打包工具

現在前端打包基本上都會用 webpack，它不僅能打包源代碼文件（如 js, css, html, ts, ...），還能打包靜態資源文件（如 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. eslint: js 語法（包括 jsx 語法）檢查與矯正

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

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

安裝

# 全局
npm install -g eslint# 本地
npm install --save-dev eslint

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

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

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

安裝

# 全局
npm install -g stylelint# 本地
npm install --save-dev stylelint

8. prettier: 代碼格式優化

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

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

安裝

# 全局
npm install -g prettier# 本地
npm install --save-dev prettier

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

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

安裝

# 全局
npm install -g gulp# 本地
npm install --save-dev gulp

10. jest: js 測試庫

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

安裝

npm install --save-dev jest

11. enzyme: react 組件測試庫

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

安裝

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

12. react-devtools: chrome 開發者工具插件 for react

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

圖片描述

安裝

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

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

13. redux-devtools 與 redux-devtools-extension: chrome 開發者工具插件 for redux

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

13.1 安裝 redux-devtools

這種安裝方式，redux-devtools 會嵌入到頁面中，成為頁面的一部分。

npm install --save-dev redux-devtools# 還可以安裝
npm install --save-dev redux-devtools-log-monitor
npm install --save-dev redux-devtools-dock-monitor

更多信息參考 redux-devtools - Walkthrough.

圖片描述

13.2 安裝 redux-devtools-extension

這種安裝方式是成為瀏覽器開發者工具的一個插件。

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

其他安裝方式查看 redux-devtools-extension.

圖片描述

14. vue-devtools: chrome 開發者工具插件 for vue

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

圖片描述

安裝

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

其他安裝方式查看 vue-devtools.

15. 后續

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/253500.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/253500.shtml
英文地址，請注明出處：http://en.pswp.cn/news/253500.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

CMOS圖像傳感器——TOF 圖像傳感器

CMOS圖像傳感器——TOF 圖像傳感器

一、3D成像技術概述 圖像傳感器一直以來都是人類研究的熱點。但隨著當代科學技術發展， 人類對于傳統的 2D 圖像傳感器的要求越來高，不僅期望著更高分辨率，更快速度，更大的動態范圍，人類加希望能夠獲得物體深信息，但是 2D 成 像技術現在已經不能滿足人類的需求，所以應運…
閱讀更多...
AndroidStudio創建jinLibs文件夾

AndroidStudio創建jinLibs文件夾

在文件中的buildTypes節點下添加 sourceSets.main { jniLibs.srcDir libs } 如圖 轉載于:https://www.cnblogs.com/kim-liu/p/7479360.html
閱讀更多...
內嵌Tomcat的Connector對象的靜態代碼塊

內嵌Tomcat的Connector對象的靜態代碼塊

在排查問題的過程中發現Connector對象有一個靜態代碼塊&#xff1a; static {replacements.put("acceptCount", "backlog");replacements.put("connectionLinger", "soLinger");replacements.put("connectionTimeout", &quo…
閱讀更多...
????YAFFS2文件系統在嵌入式LINUX系統中的應用

????YAFFS2文件系統在嵌入式LINUX系統中的應用

YAFFS2文件系統在嵌入式LINUX系統中的應用 2011-03-31 19:59 181人閱讀 評論(0) 收藏 舉報 1&#xff0e;文件系統簡述 隨著32位CPU價格不斷下跌&#xff0c;片上存儲設備的容量相比越來越大&#xff0c;越來越多的嵌入式系統開始應用各種嵌入式操作系統。一般在嵌入式領域&am…
閱讀更多...
【Python爬蟲學習筆記1】網絡協議及請求基礎

【Python爬蟲學習筆記1】網絡協議及請求基礎

http協議與https協議 HTTP協議(全稱為HyperText Transfer Protocol&#xff0c;超文本傳輸協議)&#xff0c;是發布和接收HTML頁面的方法&#xff0c;其服務端口號為80。 HTTPS協議為HTTP協議的加密版本&#xff0c;其在HTTP下加入了SSL層&#xff0c;服務端口號為443。 URL結構…
閱讀更多...
快速上手SpyGlass——基本流程

快速上手SpyGlass——基本流程

SpyGlass&#xff0c;這是一個很強大的RTL驗證級工具。它不僅僅能檢查sdc的錯誤&#xff0c;還能做以下各種檢查&#xff1a;Low Power, DFT&#xff0c;CDC&#xff08;Cross Domain Check&#xff09;。 一、基本概念 1、方法學相關 Rule: 是SpyGlass 進行RTL分析的最小單…
閱讀更多...
NAND FLASH ECC

NAND FLASH ECC

NAND需要ECC以確保數據完整性。NAND閃存的每一個頁面上都包括額外的存儲空間&#xff0c;它就是64個字節的空閑區(每512字節的扇區有16字節)。該區能存儲ECC代碼及其它像磨損評級或邏輯到物理塊映射之類的信息。ECC能在硬件或軟件中執行&#xff0c;但是&#xff0c;硬件執行有…
閱讀更多...
快速上手SpyGlass——CDC檢查

快速上手SpyGlass——CDC檢查

隨著技術的發展&#xff0c;數字電路的集成度越來越高&#xff0c;設計也越來越復雜。很少有系統會只工作在同一個時鐘頻率。一個系統中往往會存在多個時鐘&#xff0c;這些時鐘之間有可能是同步的&#xff0c;也有可能是異步的。如果一個系統中&#xff0c;異步時鐘之間存在信…
閱讀更多...
laravel session redis 設置

laravel session redis 設置

Laravel 在使用 Redis 作為 Session 驅動之前&#xff0c; 需要通過 Composer 安裝 predis/predis 擴展包 (~1.0)。 當然也可以用原生自帶的&#xff0c;具體使用見 https://laravel-china.org/docs/laravel/5.6/redis/1402#phpredis　操作即可。 然后在database 配置文件中配置…
閱讀更多...
數字后端——低功耗單元庫

數字后端——低功耗單元庫

在之前的文章中&#xff0c;介紹了低功耗設計物理實施的方案&#xff1a; 數字后端——低功耗設計物理實施_滄海一升的博客-CSDN博客_低功耗設計低功耗設計方案所涉及到的物理實施相關內容https://blog.csdn.net/qq_21842097/article/details/119918312 為了實現例如門…
閱讀更多...
【CUDA開發】CUDA面內存拷貝用法總結

【CUDA開發】CUDA面內存拷貝用法總結

【CUDA開發】CUDA面內存拷貝用法總結 標簽&#xff08;空格分隔&#xff09;&#xff1a; 【CUDA開發】 主要是在調試CUDA硬解碼并用D3D9或者D3D11顯示的時候遇到了一些代碼&#xff0c;如下所示&#xff1a; CUdeviceptr g_pRgba 0; CUDA_MEMCPY2D memcpy2D { 0 }; memcp…
閱讀更多...
PerfMon常用計數器

PerfMon常用計數器

摘要: 故事來源于《sql server2012 深入解析和性能分析》 1.重要的PerfMon CPU計數器 計數器查看內容發生問題的條件Processor%Processor TimeCPU為生產環境的請求提供服務消耗的時間占總CPU時間的百分比>80%Processor%Privilege Time　　CPU為內核模式請求提供服務消耗的時…
閱讀更多...
NandFlash詳述

NandFlash詳述

1. 硬件特性&#xff1a; 【Flash的硬件實現機制】 Flash全名叫做Flash Memory&#xff0c;屬于非易失性存儲設備(Non-volatile Memory Device)&#xff0c;與此相對應的是易失性存儲設備(Volatile Memory Device)。這類設備&#xff0c;除了Flash&#xff0c;還有其他比較常見…
閱讀更多...
史上最全的MySQL高性能優化實戰總結！

史上最全的MySQL高性能優化實戰總結！

1.1 前言 MySQL對于很多Linux從業者而言&#xff0c;是一個非常棘手的問題&#xff0c;多數情況都是因為對數據庫出現問題的情況和處理思路不清晰。在進行MySQL的優化之前必須要了解的就是MySQL的查詢過程&#xff0c;很多的查詢優化工作實際上就是遵循一些原則讓MySQL的優化器…
閱讀更多...
低功耗設計——基于UPF進行設計

低功耗設計——基于UPF進行設計

UPF&#xff0c; 統一電源格式UPF(Unified Power Format)是新思(Synopsys)公司通用的電源格式&#xff0c;是一組標準的類Tcl 語言的集合&#xff0c;用來描述芯片設計中的低功耗意圖&#xff08;Low-Power Design Intent&#xff09;。 使用UPF 的語言&#xff0c;可以描述供電…
閱讀更多...
用公眾號獲取 任意公眾號文章列表 軟件還是免費

用公眾號獲取 任意公眾號文章列表 軟件還是免費

用公眾號獲取 任意公眾號文章列表 軟件還是免費還不快點下載 下載 地址 https://pan.baidu.com/s/1jI44Wjs轉載于:https://www.cnblogs.com/wx85437898/p/7488590.html
閱讀更多...
CentOS7時間設置問題

CentOS7時間設置問題

本地安裝一個VMWare player虛擬機客戶端&#xff0c;并安裝了Linux CentOS7 Basic Web Server系統&#xff0c;時區在安裝時已經選擇了Asia/Shanghai,但是安裝完成后&#xff0c;時間和當前外部的時間不一致&#xff0c;如下圖 圖一 圖二 圖三 后經搜索發現&#xff0c;由于未開…
閱讀更多...
關于Nand ECC 錯誤

關于Nand ECC 錯誤

Nand flash ECC數據錯誤怎么辦&#xff1f; 我編譯過kernel 當時選了ECC校驗 啟動以后報錯 去掉了&#xff0c;就不報錯了 所以我會先考慮是不是這個問題 一般來說&#xff0c;硬件ECC校驗出錯可能性比較小吧&#xff1f; 我啥也不懂 -----摘自網絡經典文章&#xff1a;“LINU…
閱讀更多...
低功耗設計——功耗估算

低功耗設計——功耗估算

根據在功耗分析的過程中是否有輸入向量的提供&#xff0c;功耗估算方法可以分為仿真的方法&#xff08;Simulative&#xff09;和非仿真的方法&#xff08;Non-simulative&#xff09;&#xff1a; 仿真的方法是根據用戶所提供的大量輸入向量來對電路進行模擬&#xff0c;利用…
閱讀更多...
uboot 與系統內核中 MTD分區的關系

uboot 與系統內核中 MTD分區的關系

分類&#xff1a; Nand 驅動 2011-11-06 23:48 705人閱讀 評論(2) 收藏 舉報 uboot 與系統內核中 MTD分區的關系&#xff1a; 分區只是內核的概念&#xff0c;就是說A&#xff5e;B地址放內核&#xff0c;C&#xff5e;D地址放文件系統&#xff0c;等等。 1&#xff1a;在內核…
閱讀更多...
最新文章

Copyright @ 2022~2023