前端自動(dòng)化開發(fā)之Node.js的環(huán)境搭建教程

一、為什么我們前端自動(dòng)化開發(fā)

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

而自動(dòng)化開發(fā)能帶來哪些自動(dòng)化：

     1.自動(dòng)編譯（將less，sass等自動(dòng)編譯）

     2.自動(dòng)合并（將頁(yè)面引入的多個(gè)js文件，或者css文件，合并為同一個(gè)且壓縮）

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

     4.自動(dòng)部署（自動(dòng)將項(xiàng)目打包部署到指定目錄）

     5.自動(dòng)同步（能夠方便實(shí)現(xiàn)多個(gè)瀏覽器窗口，同步點(diǎn)擊，輸入，調(diào)試）

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

二、Node.js是個(gè)什么東西？

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是一個(gè)基于Chrome V8引擎的javascript的運(yùn)行環(huán)境，其使用了事件驅(qū)動(dòng)，非阻塞I/O模型，非常輕便高效，其包管理工具npm，是全球最大的開源庫(kù)生態(tài)系統(tǒng)。

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

三、安裝Node.js

安裝有多種方式，，https://nodejs.org/en/ 可以直接在官網(wǎng)，下載安裝版安裝，這種方式很簡(jiǎn)單粗暴，下一步就解決，就不多介紹了，介紹另一種方式，nvm安裝，因?yàn)橛袝r(shí)我們?cè)谑褂眠^程中，可能要用多種版本的node，而nvm可以讓我們?cè)谑褂眠^程方便的切換的使用版本。

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

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

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

然后我們開始配置環(huán)境變量了，因?yàn)閯倓傸c(diǎn)擊了install.cmd的文件，那么會(huì)在環(huán)境變量的系統(tǒng)變量中，生成兩個(gè)環(huán)境變量：NVM_HOME 和NVM_SYMLINK 我們開始修改這兩個(gè)變量名的變量值：NVM_HOME的變量值為：C:\dev\nvm； NVM_SYMLINK的變量值為：C:\dev\nodejs

然后我們配置PATH的環(huán)境變量，為了添加%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，因?yàn)槟J(rèn)是64位的

四、npm的安裝

我們安裝的每個(gè)node版本中已經(jīng)自帶了一個(gè)npm，但是由于我們可能會(huì)有切換node版本的時(shí)候，這時(shí)為了統(tǒng)一起見，我們需要安裝一個(gè)全局的npm

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

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

我們?yōu)檫@個(gè)npm配置環(huán)境變量： 變量名為：NPM_HOME，變量值為 ：C:\dev\nvm\npm

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

最后我們新打開一個(gè)命令窗口，輸入npm -v ,此時(shí)我們使用的就是我們統(tǒng)一下載的npm包了。

同樣的我們還可以安裝cnpm工具，它是中國(guó)版的npm鏡像庫(kù)，地址在這里：https://cnpmjs.org/，也是npm官方的一個(gè)拷貝，因?yàn)槲覀兒屯饨缬幸欢聣Ω糁?，所以用這個(gè)國(guó)內(nèi)的比較快，淘寶也弄了一個(gè)和npm一樣的鏡像庫(kù)，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后，直接執(zhí)行cnpm install 包名比如：cnpm install bower -g 就可以了。-g只是為了把包安裝在全局路徑下。如果不全局安裝，也可以在當(dāng)前目錄中安裝，不用-g就可以了。

五、nrm安裝

什么是nrm？

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

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

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

命令：nrm use cnpm 我們這樣就可以直接切換到cnpm上了。當(dāng)然也可以按照上面羅列的其他內(nèi)容進(jìn)行切換。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)億速云的支持。