前端工程化學習（一）—— node版本管理及包管理

前言

在前端工程化中，node扮演着一個很是重要的角色，nodejs的誕生使得前端再也不停留在寫靜態頁面和切圖等工做，相繼帶來的前端工程化生態也所以變得活躍繁榮起來，而在咱們平常的前端開發中，已是離不開這些node版本和npm包管理，這裏寫一下平常開發中的這些版本管理和包管理。

訴求

• 前端開發中常常會參與不一樣的項目，不一樣項目中可能使用不一樣的node版本，因此須要在本身的開發環境下可以切換使用不一樣的node版原本知足開發的訴求
• 可以在運行項目的時候就直接使用默認的node版本，減小團隊成員的上手成本，減小頻繁的切換node版本帶來的無效輸出
• 抹平不一樣包管理工具的安裝結果的差別
• 包管理鏡像源指定，減小由於某些網絡問題帶來的安裝上的麻煩

node版本管理

筆者使用過的node版本管理工具主要是下面這兩種

• nvm
• n

二者的區別在於n是一個npm包，安裝以前本身的環境下必需要先安裝好node,nvm則沒必要，另一個是n不支持window，nvm則支持在Mac和window下使用。還有一個使用上的差別是筆者碰到的，不知道其餘同窗有沒有經歷過，用n的話全局的node版本都會切換，也就是使用terminal打開了多個窗口，使用n的話不一樣的窗口的node版本都會跟着切換，而nvm則能夠在不一樣的窗口下保持不一樣的node版本，這樣能夠知足同時啓動不一樣node版本的項目。因此在實際開發中筆者和團隊基本上都是使用的nvm

nvm安裝及使用

這個安裝由於網路問題會有點麻煩，筆者在公司網絡代理下使用curl安裝是很是順利的，可是在本身的網絡下就會相對麻煩一點，github的一些相關資源訪問不到，因此安裝起來特別麻煩

若是各位同窗網絡比較好的話能夠安裝nvm官方github上面提供的安裝方式，例如curl或者wget，注意看本身的shell是用的什麼，筆者是用的zsh，因此最後面指定用了zsh

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | zsh
複製代碼

若是是本身網絡並且網絡不是很好的話，能夠考慮用國內的一些鏡像，筆者在本身的電腦上是參考了 這個
經常使用命令以下

nvm install ## 安裝指定版本，可模糊安裝，如：安裝v6.2.0，既可nvm install v6.2.0，又可nvm install 6.2
nvm uninstall ## 刪除已安裝的指定版本，語法與install相似
nvm use ## 切換使用指定的版本node
nvm ls ## 列出全部安裝的版本
nvm ls-remote ## 列出因此遠程服務器的版本（官方node version list）
nvm current ## 顯示當前的版本
nvm alias ## 給不一樣的版本號添加別名
nvm unalias ## 刪除已定義的別名
nvm reinstall-packages ## 在當前版本node環境下，從新全局安裝指定版本號的npm包
複製代碼

運行項目的時候指定node版本，當使用nvm的時候，在不一樣項目根目錄下咱們能夠建立一個.nvmrc的文件，指定該項目使用的node版本，這樣運行的時候就會自動切換到指定的版本,例如這樣

lts/erbium
複製代碼

包管理

包管理工具市面上有好幾種，筆者接觸過的有這下面三種，具體使用哪種看團隊和項目的具體狀況

• npm
• yarn
• pnpm

在項目開發的時候咱們會安裝一些包，或者指定一些公司內部的鏡像，或者經過指定一些國內的鏡像來達到加速安裝的效果，這時候咱們能夠在項目的根路徑下車間.npmrc文件或者.yarnrc文件，在這些文件裏面指定registry和鏡像源或者是一些cdn地址，筆者接觸到的項目中爲了知足不一樣的包管理工具，因此同時都加上了.npmrc和.yarnrc

資源管理

平時開發的時候會使用多個npm源，例如爲了加速使用國內淘寶的源，或者公司內部有本身的源，能夠指定使用，這裏可使用nrm(npm registry manager)來快速切換npm源，或者同上面那樣在rc文件中指定好registry

nrm經常使用命令

npm install -g nrm  ## nrm 安裝
nrm ls ## 列出可用的源
nrm use taobao ## 選擇國內淘寶的源
nrm test npm ## 測試速度
nrm add taobao http://192.168.10.127:8081/repository/npm-public/ ##  添加源
nrm del taobao ## 刪除對應的源
複製代碼

npx的使用

npx是npm v5.2.0引入的一條命令，會幫你執行依賴包裏的二進制文件，該命令的目的是爲了提供開發者使用包內提供的命令行工具的體驗
簡單舉個例子，以咱們比較熟悉的create-react-app這個舉例子，按以前的方式咱們必須全局安裝create-react-app,而後才能使用這個腳手架執行對應的命令，並且須要用到新版本的腳手架的時候只能經過更新全局的這個包來實現升級。

npm install -g create-react-app
create-react-app my-app
複製代碼

使用了npx以後，咱們不須要全局安裝這個就能夠直接使用

npx create-react-app my-app
複製代碼