国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

SillyMonkey / 1866人閱讀

摘要：前端開發(fā)需要了解的工具集合前端開發(fā)需要了解的一些工具，這些工具能夠幫助你在項目開發(fā)中事半功倍。總之，是前端打包的不二選擇。所以，很多情況下都是與配合使用。它的一個理念就是提供一套完整集成的零配置測試體驗。

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

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

1. nrm: npm registry 管理器

registry: npm 遠程倉庫的地址。

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

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

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

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

安裝 
npm install -g nrm
內(nèi)置的 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: 使用國內(nèi)鏡像倉庫的 npm 客戶端

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

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

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

安裝 
npm install -g cnpm
3. yarn: 類似 npm 的依賴管理工具

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

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

安裝 
npm install -g yarn
4. webpack: 前端打包工具

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

安裝 
# 全局
npm install -g webpack

# 本地
npm install --save-dev webpack
5. babel: es6 -> es5 轉(zhuǎn)碼器

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

安裝 
# 全局
npm install -g babel-cli

# 本地
npm install --save-dev babel-cli
6. eslint: js 語法（包括 jsx 語法）檢查與矯正

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

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

安裝 
# 全局
npm install -g eslint

# 本地
npm install --save-dev eslint
7. stylelint: css 語法（包括 less, scss 語法）檢查與矯正

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

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

安裝 
# 全局
npm install -g stylelint

# 本地
npm install --save-dev stylelint
8. prettier: 代碼格式優(yōu)化

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

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

安裝 
# 全局
npm install -g prettier

# 本地
npm install --save-dev prettier
9. gulp: 基于流的自動化構(gòu)建工具

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

安裝 
# 全局
npm install -g gulp

# 本地
npm install --save-dev gulp
10. jest: js 測試庫

在 Facebook 內(nèi)部，包括 react 應(yīng)用在內(nèi)的所有 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 開發(fā)者工具插件 for react

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

安裝

通過 chrome 應(yīng)用商店安裝 chrome - react-developer-tools.

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

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

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

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

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

通過 chrome 應(yīng)用商店安裝 chrome - redux-devtools.

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

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

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

安裝

通過 chrome 應(yīng)用商店安裝 chrome - vuejs-devtools.

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

15. 后續(xù)

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

作者：深予之 (@senntyou)

版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113946.html

相關(guān)文章

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

    摘要：前端開發(fā)需要了解的工具集合前端開發(fā)需要了解的一些工具，這些工具能夠幫助你在項目開發(fā)中事半功倍。總之，是前端打包的不二選擇。所以，很多情況下都是與配合使用。它的一個理念就是提供一套完整集成的零配置測試體驗。 前端開發(fā)需要了解的工具集合：webpack, eslint, prettier, ... 前端開發(fā)需要了解的一些工具，這些工具能夠幫助你在項目開發(fā)中事半功倍。 1. nrm: npm...

    zhaochunqi 評論0 收藏0

  • 前端進階（13） - 搭建自己的前端腳手架

    摘要：搭建自己的前端腳手架一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。搭建腳手架可以用等命令行工具，也可以直接用等模板，如果這些都不能滿足你的個性化需求，可以嘗試搭建自己的前端腳手架。 搭建自己的前端腳手架 一般新開發(fā)一個項目時，我們會首先搭建好一個腳手架，然后才會開始寫代碼。搭建腳手架可以用 create-react-app、vue-cli、yeoman 等命令行...

    lykops 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

    摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

    call_me_R 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

    摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

    wzyplus 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

    摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

    aristark 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<