第四節:前端自動化准備和詳細配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、Git/SVN)


一. 各類概念和指令介紹

 1. NVM

(1).  全稱:Node Version Manager,是一款針對Nodejs的版本管理工具,由於Node的版本很多,很多時候我要需要依賴多個版本,並且要求可以自動切換,這個時候采用NVM來管理Node再合適不過了。

(2). 下載地址:https://github.com/coreybutler/nvm-windows/releases

(3). 常用指令:

  a. 查看已經安裝的node版本:    【nvm list】

  b. 更換當前node的版本:          【nvm  use 版本號 】

  c.  安裝指定版本的node:          【nvm  install 版本號 】      (nvm install stable   特指安裝最新最穩的node版本      nvm install latest  特指下載最新的node版本)

  d.  刪除指定版本的node:         【nvm  uninstall 版本號】

  其它指令:

 (4). NVM自身版本如何更新:

     NVM總共就5個文件,直接復制到原文件夾下,覆蓋即可。

 

 2. Node.JS

  (1). 一個JS的運行環境

  (2). 主要用於開發Web應用程序

  (3). 很多的前端開發工具都是基於node這個平台

  (4). 所用的工具就相當於一些軟件

  PS:

    Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境,Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。

    Node.js 的包管理器 npm,是全球最大的開源庫生態系統。

    Node.js的版本管理器為nvm。

3. NPM

  NPM(node package manager),是Node.js的包管理器,是全球最大的開源生態庫。

  參考地址:  官方網站:https://www.npmjs.com/

                           淘寶鏡像:https://npm.taobao.org/

       npm管理包非常方便,我們只需要記住使用哪個包就可以了,類似於.Net平台下的Nuget。

 4. CNPM

  cnpm工具,它是中國版的npm鏡像庫,地址在這里:https://cnpmjs.org/,也是npm官方的一個拷貝,因為我們和外界有一堵牆隔着,所以用這個國內的比較快,淘寶也弄了一個和npm一樣的鏡像庫,http://npm.taobao.org/,它和官方的npm每隔10分鍾同步一次。安裝方式:

  指令:【npm install -g cnpm --registry=https://registry.npm.taobao.org】

  安裝好了cnpm后,直接執行:cnpm install 包名

  比如:cnpm install bower -g 就可以了。-g只是為了把包安裝在全局路徑下。如果不全局安裝,也可以在當前目錄中安裝,不用-g就可以了。

注意:cnpm的下載路徑按照上述指令安裝的話,默認就是從taobao的地址下載,和通過nrm切換npm的下載源到taobao,此時npm和cnpm的下載源是相同的,下載速度也是一致的。

5. NRM

  nrm就是npm registry manager 也就是npm的鏡像源管理工具,有時候國外資源太慢,那么我們可以用這個來切換下載的鏡像源。 

       我們只要通過這個命令: npm install -g nrm 】就可以實現安裝。 

       注意:-g可以直接放到install的后面,我們以后也最好這樣用,因為這樣用,我們可以在cmd中上下箭頭切換最近命令的時候,容易修改,更方便操作。安裝完成后,我們就可以使用了。

  命令:nrm ls 】用於展示所有可切換的鏡像地址

  命令:【nrm use taobao】 我們這樣就可以直接切換到taobao上了,和上述的cnpm就一致了。當然也可以按照上面羅列的其他內容進行切換。

6. WebPack

  WebPack可以看做是模塊打包機:它做的事情是,分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),並將其轉換和打包為合適的格式供瀏覽器使用。

  Webpack的工作方式是:把你的項目當做一個整體,通過一個給定的主文件(如:index.js),Webpack將從這個文件開始找到你的項目的所有依賴文件,使用loaders處理它們,最后打包為一個(或多個)瀏覽器可識別的JavaScript文件。

7. Gulp/Grunt

  Grunt和Gulp的工作方式是:在一個配置文件中,指明對某些文件進行類似編譯,組合,壓縮等任務的具體步驟,工具之后可以自動替你完成這些任務。

8. Git/SVN

  代碼、文件等版本管理工具。

二. 安裝步驟(兩套安裝方案)

 方案一:嚴格按照順序進行安裝配置 

(一). 安裝NVM的詳細步驟

   (1). 在C盤目錄下建一個Develop文件夾,該文件用來存放各種與開發相關的配置。

  (2). 在Develop文件夾中新建nvm文件夾,並將下載的nvm五個文件拷貝進去。

   下載地址:https://github.com/coreybutler/nvm-windows/releases  

   注意:下載免安裝版本的,不要下載exe安裝程序。

 

(3). cmd命令測試是否安裝成功。

 輸入指令:【nvm -v 】,  發現並不能用原因是還沒有配置環境變量

 

(4).  配置環境變量

    NVM_HOME=C:\Develop\nvm

    PATH=%NVM_HOME%;

    如圖所示:

然后通過命令測試:

 發現:並沒有成功,原因是 nvm 的根目錄下缺少一個 配置文件setting.txt。

(5). 動態生成配置文件

(有現成的可以直接拷貝進去,這里介紹一種動態生成的方式)。

  雙擊:install.cmd命令,然后把當前路徑拷貝進去,點擊回車,會自動在當前目錄下生成 setting.txt文件。

重新cmd 輸入指令【nvm -v】,發現大功告成。

 

下面我們測試一下nodejs環境,指令【nvm list】,發現並沒有安裝。

 

(二). 安裝Node.js

(1). 直接輸入指令【nvm install latest】,安裝最新版本的node。 

特別注意:備注: 如果你的電腦系統是32 位的,那么在下載nodejs版本的時候,一定要指明 32 如:【nvm install 5.11.0 32 】 這樣在32位的電腦系統中,才可以使用,默認是64位的。

  這個時候發現一個現象,下載完最新的nodejs版后,自動去下載最新的npm了,這個現象很正常,在每個版本的nodejs中,都會自帶npm,為了統一起見,我們安裝一個全局的npm工具,這個操作很有必要,因為我們需要安裝一些全局的其他包,不會因為切換node版本造成原來下載過的包不可用。

  為了后面演示切換方便,我們這里再安裝另外一個node的版本 指令【node install 6.2.0】

    同樣的現象,安裝完node后,會自動下載該版本的node對應npm包。

 (2). 配置node的環境變量

這里先補充一個知識點:nvm切換node版本的原理,會在nvm的同級目錄下生成一個nodejs的快捷方式,當前使用哪個版本的node,該快捷方式就會執行nvm文件夾里的對應版本的node

   基於以上原理,配置nodejs環境變量的時候,指向的是該快捷方式,這樣無論怎么切換node版本,環境變量都不需要改,都可以直接對應。

 A:配置NVM文件夾下的setting.txt配置文件。

B:配置系統環境變量。

  NVM_SYMLINK=C:\Develop\nodejs
  PATH=%NVM_SYMLINK%;

 

 

(3) . 查看已經安裝的node版本,並選擇指定版本來使用。

  查看已經安裝的node版本,指令【node list】

  選擇8.5.0版本進行使用,指令 【node use 8.5.0】

   再輸入該命令之前,觀察一個現象,Develop目錄下只有nvm一個文件夾。

     執行該命令。

 

  發現Develop目錄下多了一個nodejs的快捷方式【正是通過該快捷方式來映射nvm文件夾里對應的node版本,同時node的環境變量也是對應該快捷方式】

  再次查看使用版本【nvm list】,發現8.5.0正在使用中

(三).  設置npm全局的下載路徑,並且安裝全局的

  我們在前面提到,每安裝一個node版本,都會安裝與其對應的npm包,在這里我們切換node版本,然后查看對應的npm版本來測試一下。

 既然我們已經裝了多個不同版本的npm了(每個版本的node對應一個版本的npm),那么我們為什么還要安裝一個全局的npm包呢?

   【首先我們先補充一個知識:通過npm下載下來的其他程序包都是存放在" node_modules "文件夾下,而每個node下的npm都對應一個" node_modules "文件夾,但我們再實際開發中,通常需要下載一些程序包,這些程序包要是全局的,不能因為切換node版本而導致該程序包不可用

 所以我們下面的思路借助已有的npm,來下載安裝一個全局的npm。

 (1). 配置NPM的全局安裝路徑

 進入cmd命令,輸入【 npm config set prefix "C:\Develop\npm" 】回車,這是在配置npm的全局安裝路徑,然后在用戶文件夾下會生成一個.npmrc的文件,用記事本打開后可以看到如下內容:

 

用記事本打開:並新增全局npm緩存的配置路徑,如下圖。

(2). 通過命令【npm install  -g npm】,下載全局的npm包   (下載不下來,先放到后面)

 

 

(3) . 配置npm的環境變量

NPM_Home=C:\Develop\npm
PATH=%NPM_Home%;

 

 (4). 安裝nrm 

通過命令: 【npm install -g nrm】全局安裝nrm

【nrm ls】,展示所有鏡像的地址。

切換npm的下載源頭。    【nrm use taobao】

 

重新全局安裝npm, 【npm install -g npm】

 

特別注意:在這里下載完后,無論node版本怎么切換,npm的版本始終是全局的npm的 : 5.4.2版本 

 

特別注意:通過nrm的指令  【nrm use taobao】,將npm的下載源頭切換到taobao,此時實際上和下面要安裝cnpm下載是一個道理的,說白了,切換后的npm,就沒有必要安裝cnpm了。

 這里再補充一種方式,來切換npm的下載路徑(可以不用安裝nrm)

【 npm config set registry https://registry.npm.taobao.org】,該指令與前面“配置npm的全局安裝路徑類似”,都是操控的 .npmrc文件。

 

(四)全局安裝cnpm

指令【npm install -g cnpm --registry=https://registry.npm.taoba0.org】

 

查看安裝是否成功【cnpm -v】

 

 

方案二. 直接官網下載NodeJS安裝包,簡單粗暴型

 1. 官網下載Node.js的msi安裝包,直接下一步安裝。

  下載地址:http://nodejs.cn/

  安裝過程非常簡單,直接下一步、下一步、一路到底。

  建議:安裝路徑根據自己的需要適當改一下。

  特別注意:選擇安裝項的這一步,要不npm和add path(自動配置環境變量),這兩個選項給勾上。

   

2. 校驗安裝成果。

   A: 發現nodejs和npm可以正常使用

    

    B: 發現在用戶變量和系統變量的path中各自多了一條記錄。

  

 

 

  C: 測試全局下載【npm install -g bootstarp】。將下載到該路徑下:C:\Users\Administrator\AppData\Roaming\npm\node_modules

 

3. 該種安裝方式總結。

  不利於nodejs的版本管理,無法自動切換或更新nodejs的版本。

  全局下載路徑需要自己重新配置,默認的路徑,有點坑爹,不好找。

  默認是沒有安裝nrm或cnpm的,需要自己重新切換下載源,默認是國外的。

 

最后建議: 生命在於折騰,建議采用方案一的方式進行配置,對每一步的作用做到心中有數。

 

三. npm或cnpm使用

 這里以cnpm的指令來介紹,npm的使用只需將指令中的cnpm改為npm即可。【手動將npm的下載源切換到taobao,實際上和cnpm一樣了】

  1. 將npm更新到最新版本:  【npm install -g npm】

  2. 將cnpm更新到最新版本:【cnpm install -g cnpm】

  3. 安裝其它程序包:     【cnpm install xxx】    會在當前路徑上生成一個"node-modules",並將xx程序下載到該文件夾下。

  eg : 新建一個文件夾,在該文件夾下打開cmd命令,輸入指令:  【cnpm install  bootstrap 】

 刪除其它程序包:   【cnpm uninstall xxx】

  4. 安裝其它程序到全局npm路徑下: 【cnpm install -g xx】

   刪除其它全局程序包:【cnpm uninstall -g xx】

  5. 補充知識點:項目依賴

  A: 普通項目依賴:

    【npm init】:生成一個package.json文件,用來記錄項目需要依賴哪些東西。

  【npm install xx --save】:對應的是 package.json 文件 dependencies,該節點表示發布之后還需要依賴的東西。(eg:JQuery,發布之后,仍然需要依賴JQuery庫)

  【npm install xx --save-dev】:對應的是package.json 文件 devDependencies,該節點表示開發階段需要依賴的東西。(eg:grunt、bable類似的工具類 ,只在開發階段使用)

 

                【npm install】:默認還原的是package.json下dependencies和devDependencies兩個節點下的所有依賴庫。

        B:全局依賴:特指你要安裝一個工具包,系統中任何位置都可能用到,這種情況下一版要全局安裝。

         指令:【cnpm install -g xx】

6.  全局npm版本更新

  【npm install -g npm】,時間有點長,大約需要兩分鍾

 

四. 使用以上配置包,快速配置

  看了上面的方案一的配置步驟,雖然步驟比較詳細,但是受網速等一系列因素,對應一個新手而已,沒有一兩個小時,是很難配置成功的。 

  方案二簡單粗暴的安裝,不便於多版本的控制,不靈活。

  所以這里我將提供我個人的已經下載配置好的程序包供廣大網友使用,只需配置環境變量即可,省去了煩人的下載步驟。

  下載地址:http://pan.baidu.com/s/1o8uUMgU   

  壓縮文件中包括:【Develop文件夾】  【.nmprc文件】

  Develop包括:【nvm 1.1.6】、【nodejs 8.5.0】、【nodejs 6.2.0】、【全局的npm  5.4.2】、【全局的nrm】、【全局的cnpm】

  注意:這里的.npmrc里已經默認把npm的下載源頭切換到了國內的taobao了,同cnpm一樣了。

快速配置步驟:

  (1). 解壓壓縮包:將Develop文件夾移動到C盤的根目錄,將.nmprc移動到C盤→用戶→Administrator(也可能是其他用戶名)。

        (2). 配置環境變量

    NVM_HOME=C:\Develop\nvm

    NVM_SYMLINK=C:\Develop\nodejs

    NPM_HOME=C:\Develop\npm          

    PATH=%NVM_HOME%;%NVM_SYMLINK%;%NPM_HOME%

        注意:在配置path的時候,前后注意要有分號。

  (3). 通過指令測試是否成功。(前前后后,分鍾足以搞定)

 

 

 

PS: 后台技術系列

定時調度系列之Quartz.Net詳解

那些年我們一起追逐的多線程(Thread、ThreadPool、委托異步調用、Task/TaskFactory、Parallerl、async和await)

ASP.NET MVC深入淺出系列(持續更新)

ORM系列之Entity FrameWork詳解(持續更新)

DotNet進階系列(持續更新)

 

 

!

  • 作       者 : Yaopengfei(姚鵬飛)
  • 博客地址 : http://www.cnblogs.com/yaopengfei/
  • 聲     明1 : 本人才疏學淺,用郭德綱的話說“我是一個小學生”,如有錯誤,歡迎討論,請勿謾罵^_^。
  • 聲     明2 : 原創博客請在轉載時保留原文鏈接或在文章開頭加上本人博客地址,如需代碼請留下你的評論,加我QQ:604649488 (備注:評論的博客名)
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM