前端自動化開發之Node.js的環境搭建教程

一、為什么我們前端自動化開發

相信任何學開發的，不管學什么語言，老師都這樣講過，作為一名開發人員，你最大的精力應該是放在創造力上面，don't you repeat myself 不要重復自己，而在我們開發過程中，往往存在很多大量的重復操作，所以我們需要為這些操作省去時間，騰出更多的時間來讓我們創造。

而自動化開發能帶來哪些自動化：

     1.自動編譯（將less，sass等自動編譯）

     2.自動合并（將頁面引入的多個js文件，或者css文件，合并為同一個且壓縮）

     3.自動刷新（IDE保存，瀏覽器不用刷新，自動看到效果）

     4.自動部署（自動將項目打包部署到指定目錄）

     5.自動同步（能夠方便實現多個瀏覽器窗口，同步點擊，輸入，調試）

有沒有感覺很心動額，能夠幫我們做這么多事情，所以下面我們就來搭建吧，此次搭建，包括環境搭建，工具搭建，項目架構搭建，連載，今天這篇，將環境搭建的初步，nodejs環境搭建。

二、Node.js是個什么東西？

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. 
Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. 
Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world. 

翻譯一哈就是：Node.js是一個基于Chrome V8引擎的javascript的運行環境，其使用了事件驅動，非阻塞I/O模型，非常輕便高效，其包管理工具npm，是全球最大的開源庫生態系統。

意思就是，本來瀏覽器在顯示我們看到的網站的時候，會做很多事情，頁面渲染，js渲染等等，然后node把其中js渲染的引擎拿出來，并且使用了谷歌的V8，然后在其外面又封裝了一層api，讓其擁有了文件讀寫，網絡等操作，提供了一個服務端的運行環境，但卻是運行的javascipt。所以說nodejs給前端開發行業帶來了一場工業革命。

三、安裝Node.js

安裝有多種方式，，https://nodejs.org/en/ 可以直接在官網，下載安裝版安裝，這種方式很簡單粗暴，下一步就解決，就不多介紹了，介紹另一種方式，nvm安裝，因為有時我們在使用過程中，可能要用多種版本的node，而nvm可以讓我們在使用過程方便的切換的使用版本。

第一步下面NVM的包，https://github.com/coreybutler/nvm-windows/releases ，我們選擇第一個：nvm-noinstall.zip 下載完成后解壓到一個地方，比如: C:\dev\nvm 里面的文件列表是這樣的：elevate.cmd、elevate.vbs、install.cmd、LICENSE、nvm.exe

雙擊 install.cmd 然后會讓你輸入”壓縮文件解壓或拷貝到的一個絕對路徑” 先不用管它，直接回車，成功后，會在C盤的根目錄生成一個settings.txt的文本文件，把這個文件剪切到C:\dev\nvm目錄中，然后我們把它的內容修改成這樣：

root: C:\dev\nvm 
path: C:\dev\nodejs 
arch: 64 
proxy: none 

然后我們開始配置環境變量了，因為剛剛點擊了install.cmd的文件，那么會在環境變量的系統變量中，生成兩個環境變量：NVM_HOME 和NVM_SYMLINK 我們開始修改這兩個變量名的變量值：NVM_HOME的變量值為：C:\dev\nvm； NVM_SYMLINK的變量值為：C:\dev\nodejs

然后我們配置PATH的環境變量，為了添加%NVM_SYMLINK%,%NVM_HOME%,

打開cmd，輸入命令nvm -v看到版本信息，就說明安裝成功了

然后下載nodejs，輸入命令，nvm install lastest就可以下載最新版本的node，如果要指定版本，也可以nvm install 6.4.0，如果電腦是32位的，注意在后面加上32，nvm install 6.4.0 32，因為默認是64位的

四、npm的安裝

我們安裝的每個node版本中已經自帶了一個npm，但是由于我們可能會有切換node版本的時候，這時為了統一起見，我們需要安裝一個全局的npm

首先我們進入命令模式，輸入 npm config set prefix "C:\dev\nvm\npm" 回車，這是在配置npm的全局安裝路徑，然后在用戶文件夾下會生成一個.npmrc的文件，用記事本打開后可以看到如下內容：prefix=C:\dev\nvm\npm

然后繼續在命令中輸入： npm install npm -g 回車后會發現正在下載npm包，在C:\dev\nvm\npm目錄中可以看到下載中的文件，以后我們只要用npm安裝包的時候加上 -g 就可以把包安裝在我們剛剛配置的全局路徑下了。

我們為這個npm配置環境變量： 變量名為：NPM_HOME，變量值為 ：C:\dev\nvm\npm

在Path的最前面添加; %NPM_HOME%，注意了，這個一定要添加在 %NVM_SYMLINK%之前，所以我們直接把它放到Path的最前面

最后我們新打開一個命令窗口，輸入npm -v ,此時我們使用的就是我們統一下載的npm包了。

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

npm install -g cnpm --registry=http://r.cnpmjs.org

或者用淘寶的npm install -g cnpm --registry=https://registry.npm.taoba.org

安裝好了cnpm后，直接執行cnpm install 包名比如：cnpm install bower -g 就可以了。-g只是為了把包安裝在全局路徑下。如果不全局安裝，也可以在當前目錄中安裝，不用-g就可以了。

五、nrm安裝

什么是nrm？

nrm就是npm registry manager 也就是npm的鏡像源管理工具，有時候國外資源太慢，那么我們可以用這個來切換鏡像源。
我們只要通過這個命令: npm install -g nrm 就可以實現安裝。

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

命令：nrm ls 用于展示所有可切換的鏡像地址

命令：nrm use cnpm 我們這樣就可以直接切換到cnpm上了。當然也可以按照上面羅列的其他內容進行切換。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。