（前端工程化00）磨刀篇-開發環境搭建

時間 2020-05-16

標籤前端工程磨刀開發環境搭建简体版

原文原文鏈接

字數：1913，閱讀時間：5分鐘，點擊閱讀原文
目錄：前端

前言

老丈人愛吃核桃，昨天買了點陪媳婦兒送去，老丈人年輕時練過武，用手一拍核桃就碎了，笑着對我說：「你還用錘子，你看我用手就成」。我嘴一抽，來了句：「人和動物最大的區別就是人會使用工具」。……。node

雖然是個笑話，可是我以爲仍是很是有道理的，人類從最初的石器時代到如今的科技時代，本質都是工具的提高，固古人才有「工欲善其事，必先利其器」的至理名言。webpack

前端發展到如今，早已脫離了刀耕火種的時代，新時代的前端要使用工具來提升咱們的開發效率。git

工程化的概念好久以前就誕生了，可是由於nodejs的出現，讓前端工程化的正式興起，一大波的構建工具如雨後春筍，先是grunt盛極一時，而後gulp憑着簡潔的api和超快的構建速度將grunt踩在腳下，隨後webpack出現了，和以前的構建工具不一樣，webpack不關心文件，只關心模塊及其依賴，它受到了廣大開發者的追捧，雖而後來parcel的出現也引發了不小的轟動，但終究是曇花一下，webpack大有一統天下之勢。github

如今構建工具已經很是成熟，也很是完備，咱們何不合理用之，把多餘的時間留給王者、留給妹子、留給春花雪月......web

分享這系列的文章一是梳理一下相關的知識以作鞏固，二是團隊分享使用，若有錯誤之處，歡迎指正。chrome

整個內容安排以下：shell

開發環境

千里之行，始於足下，爲了保證後續的內容可以順利進行，咱們首先來搭建一套開發環境。固然，若是在實際的開發中也是建議使用的，若是一個團隊中，你們都使用了相同的開發環境，我相信在尋求別人幫助的時候，就能免除環境的干擾。npm

接下來，咱們就開始吧！gulp

NVM

nvm全稱Node Version Manager，是 Nodejs 版本管理器，能夠對Nodejs的版本進行切換。相似的工具還有n，這裏只介紹nvm。 nvm的官方版本只支持Linux和 Mac。 Windows用戶，能夠用nvm-windows。詳情請查看官方說明。

在使用nvm安裝node以前，請確保以前安裝的nodejs已卸載，以避免衝突。

安裝和使用

下載nvm包。下載地址：nvm-windows下載，選擇nvm-setup.zip下載完成後進行安裝，建議安裝到一個特定的目錄中，後續咱們的全部其餘開發工具也會安裝到此目錄中，這裏我安裝到D:\development\nvm
安裝成功後，會在C盤的根目錄或者安裝目錄生成一個settings.txt文件，而後按照以下內容作修改：

root: D:\development\nvm         
  path: D:\development\nodejs 
  arch: 64                    
  proxy: none                                    
  node_mirror: http://npm.taobao.org/mirrors/node/ 
  npm_mirror: https://npm.taobao.org/mirrors/npm/

root:設置nvm目錄
path:設置nodejs安裝目錄
arch:架構，64位或者32位
proxy：代理
node_mirror：安裝node使用的鏡像源，設置成淘寶的比較快
npm_mirror：安裝npm使用的鏡像源，設置成淘寶的比較快```

設置環境變量，正常狀況下會在環境變量的系統變量中，生成兩個環境變量：NVM_HOME 和 NVM_SYMLINK ,確保這兩個變量存在且NVM_HOME的變量值爲：D:\development\nvm ； NVM_SYMLINK的變量值爲：D:\development\nodejs,而後在Path中確保引用了這兩個環境變量，如 ;%NVM_HOME%和;%NVM_SYMLINK%;
在終端輸入命令：nvm version ，查看當前nvm的版本信息。若是正常顯示版本號，就能夠安裝nodejs了，不然須要檢查以上安裝配置是否正確。
繼續輸入命令：nvm install latest, 若是網絡暢通，會看到正在下載的提示，即會安裝最新版本的node。
若是是第一次下載，在use以前，D:\development目錄下是沒有nodejs這個文件夾的，在輸入好比： nvm use 12.16.0 以後，在D:\development目錄下便會建立一個nodejs文件夾，這個文件夾是一個快捷方式，指向了D:\development\nvm 裏的v12.16.0文件夾。
若是是Mac用戶的話，直接使用Homebrew進行安裝就好，也能夠參考官方說明進行安裝。

經常使用命令

nvm install # 安裝指定版本，可模糊安裝，如：安裝v6.2.0，既可nvm install v6.2.0，又可nvm install 6.2
nvm uninstall # 刪除已安裝的指定版本，語法與install相似
nvm use # 切換使用指定的版本node
nvm ls # 列出本地全部安裝的版本

NPM配置

在上面，若是咱們用nvm安裝了nodejs，那麼同時也會安裝npm。若是咱們但願npm安裝的全局包也放在D:\development下，那咱們能夠執行如下命令：

npm config set prefix "D:\development\npm"

能夠查看用戶目錄下的.npmrc文件是否包含內容prefix=D:\development\npm。

另外，須要在系統環境變量配置NPM_HOME，變量值爲D:\development\npm,而後在Path中引用該變量;%NPM_HOME%;,須要確保放在%NVM_SYMLINK%前面。

此時，若是你安裝一個全局模塊的話，就會被安裝到上面設置的目錄中了。

NRM

nrm(npm registry manager )是npm的鏡像源管理工具，有時候國外資源太慢，能夠用這個工具來切換鏡像源。

全局安裝nrm：npm install -g nrm
安裝後就可使用nrm的相關功能，列出可以使用的資源：nrm ls，會顯示以下內容：

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/

選擇淘寶的源：nrm use taobao

如今nrm切換源不只能夠做用於npm，並且yarn也是有效的。固然還有些其餘方案，好比用cnpm代替npm，我的是不建議這樣作的，由於有時候會出現一些奇怪的問題。

另外，若是在咱們開發中，發現某些模塊安裝老是失敗或者很慢，如node-sass、electron、chrom等，咱們能夠手動將安裝源設置爲淘寶的地址：
- 打開用戶目錄的.npmrc
- 加入要設置的源
```
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"=true
electron_mirror "https://npm.taobao.org/mirrors/electron/"=true
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"=true
```