開發工具總結(11)之nodejs、npm和yarn安裝和使用和填坑詳解

版權聲明:本文為博主原創文章,未經博主允許不得轉載。http://www.lxweimin.com/p/9eba0e2c0697

轉載請標明出處:
http://www.lxweimin.com/p/9eba0e2c0697

本文出自 AWeiLoveAndroid的博客


在前端開發領域經常會用到npm、nodejs和yarn這些工具下載一些依賴包。許多框架、依賴包或者工具都可以通過它們管理和下載。我對這些不太熟悉,花了一點點時間去學習和研究它們。整理了一篇詳細的博客給大家,希望大家多多關注,你想要學習和了解的東西看這一篇博客就夠了。如果還沒講到的知識點,建議去相應的官網了解更多知識點。本文詳細講解安裝和使用的過程,包括遇到的一些坑的解決。


一、nodejs安裝和使用

(1)nodejs下載和安裝

1、下載

打開官網下載鏈接: https://nodejs.org/

我是在5月13號下載的nodejs,當時的穩定版是v8.11.1(2018.3.29發布的穩定版 ), 最新版是 v10.1.0(Current) (2018.5.8發布的)。

我選擇穩定版進行下載。如下圖:

nodejs穩定版下載

如果你是其他系統,可以選擇下方的Other Downloads選擇你想要的版本進行下載。或者直接打開網頁https://nodejs.org/en/download/進行下載。

下載其它版本
2、安裝

下載完成后,雙擊node-v8.11.1-x64.msi,開始安裝Node.js,中間有一個提示選擇本地安裝路徑的(我安裝的本地路徑為:E:\develop\nodejs\),其它步驟一直next,一直到安裝完成。Node.js會默認添加到環境變量。

(2)查看nodejs版本號

輸入node -v,或者node --version,即可查看nodejs版本。如圖所示:

查看nodejs版本號

查看npm最新版本號,使用npm view node version,如圖所示:

查看nodejs最新版本

(3)其它配置

【Tips】如果我希望 將全局模塊所在路徑和緩存路徑放在我node.js安裝的文件夾 中,具體步驟如下:

1.首先在我安裝的文件夾E:\develop\nodejs下創建兩個文件夾node_globalnode_cache,如下圖:

配置nodejs

2.想設置全局模塊的存放路徑和cache路徑。通過以下命令,把nodejs安裝的全局模塊轉移到nodejs安裝路徑內:

npm config set prefix "E:\develop\nodejs\node_global"
npm config set cache "E:\develop\nodejs\node_cache"

如圖所示:

配置nodejs安裝模塊在nodejs安裝路徑內

3.在環境變量里面的系統變量新建NODE_PATH。(這一步相當關鍵)

點擊我的電腦(計算機) --> 右鍵選擇屬性 --> 高級系統設置 --> 高級 --> 環境變量。在系統變量里新建NODE_PATH,輸入E:\develop\nodejs\node_global\node_modules

新增NODE_PATH環境變量

4.修改環境變量里面的用戶變量里面的PATH

PATH變量中,我們在末尾加入;E:\develop\nodejs\node_global\
如果有沖突,建議把PATH里面的設置的nodejs環境變量配置去掉。

修改path環境變量

二、npm

nodejs自帶npm,所以不需要單獨下載npm了。

(1)查看npm安裝路徑

使用命令where npm即可。即可知道npm在電腦上的安裝路徑。如下圖:

查看npm安裝路徑

(2)查看npm版本號

查看npm版本,輸入npm -v,或者 npm --version, 查看npm版本。如圖所示:

查看npm版本號

查看npm最新版本號,使用npm view npm version,如圖所示:

查看npm最新版本

可以通過命令行npm -l找到這兩者的描述,如下圖所示:

查看npm版本號的兩種方式的區別

具體的完整的各個版本號信息,可以去淘寶npm鏡像:https://npm.taobao.org/mirrors/npm/

(3)升級npm

  • 1.如果想升級npm,輸入npm install npm@latest -g。這里的latest表示最新版本。
  • 2.你也可以使用具體的版本號,例如我們輸入命令:npm install npm@6.10.0 -g表示下載6.10.0這個版本的npm。關于查看各個版本號的網址上文有講解,這里就不重復了。

(4)加快npm啟動速度(3種方式)

  • 1.使用以下命令:npm config set registry=http://registry.npm.taobao.org/
  • 2.使用全局設置的命令:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
  • 3.找到node.js的安裝目錄,進入nodejs\node_modules\npm找到文件npmrc,打開后在該文件末尾加上這一行registry = https://registry.npm.taobao.org

三、yarn

(1)yarn下載和安裝

安裝的兩種方式:

方式1:使用msi安裝:

首先進入yarn的官網 https://yarnpkg.com/zh-hans/docs/install#windows-stable,然后選擇穩定版進行下載。然后雙擊安裝即可。我電腦里面其實已經通過msi文件安裝了一個yarn,路徑為:E:\develop\yarn1.7.0\

方式2:通過npm命令進行安裝:

執行命令npm install yarn -g (后面的可選參數-g,g代表global全局安裝的意思)的安裝語句時,會將安裝的模塊安裝到C:\Users\Administrator\AppData\Roaming\npm路徑中。

(2)查看安裝路徑

如果不知道路徑,可以使用where yarn命令查看電腦yarn的安裝路徑,可以看到我的安裝路徑為:E:\develop\yarn1.7.0\

查看yarn的安裝路徑

(3)查看yarn版本號

執行 yarn -v 或者yarn --version ,查看安裝的yarn版本號,比如我的版本號是1.7.0

查看yarn的版本號

(4)升級yarn

1.如果通過msi安裝的,可以卸載舊版本的yarn,然后官網下載新版的yarn進行安裝。下載地址請看上文介紹。

【注意】通過msi安裝的yarn并不會覆蓋通過npm安裝的yarn,兩者同時存在。安裝和卸載,都分開的。

2.命令行直接安裝(命令資料參考自官網,不清楚有沒有錯誤)
升級方式 命令 命令示范 含義
npm命令升級 npm install 包名稱@版本號 -g npm install yarn@1.7.0 -g 加上版本號全局安裝升級
npm命令升級 npm install 包名稱@latest -g npm install yarn@latest -g latest全局安裝升級
yarn命令升級 yarn upgrade 包名稱 yarn upgrade yarn 直接安裝升級
yarn命令升級 yarn upgrade 包名稱@版本號 yarn upgrade yarn@1.7.0 -g 加上版本號安裝升級
yarn命令升級 yarn upgrade –latest 包名稱 yarn upgrade –latest yarn latest安裝升級

(5)加快yarn啟動速度,使用全局設置的命令:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

四、npm和yarn安裝庫的命令

npm和yarn安裝庫的命令圖解如下表所示:

npm和yarn安裝庫的命令圖解

五、安裝路徑

各命令以及安裝路徑如下表所示:

安裝路徑
  • -g是可以全局復用的,如果使用npm命令,推薦在命令末尾加上-g這個比較好。
  • yarn add命令比較簡潔,推薦使用。

六、相關網址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,505評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,556評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,463評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,009評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,778評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,218評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,281評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,436評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,969評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,795評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,993評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,537評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,229評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,659評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,917評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,687評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,990評論 2 374