前端自動(dòng)化開發(fā)之Node.js的環(huán)境搭建教程
一、為什么我們前端自動(dòng)化開發(fā)
相信任何學(xué)開發(fā)的,不管學(xué)什么語(yǔ)言,老師都這樣講過(guò),作為一名開發(fā)人員,你最大的精力應(yīng)該是放在創(chuàng)造力上面,不要重復(fù)自己,而在我們開發(fā)過(guò)程中,往往存在很多大量的重復(fù)操作,所以我們需要為這些操作省去時(shí)間,騰出更多的時(shí)間來(lái)讓我們創(chuàng)造。
而自動(dòng)化開發(fā)能帶來(lái)哪些自動(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)試)
有沒(méi)有感覺(jué)很心動(dòng)額,能夠幫我們做這么多事情,所以下面我們就來(lái)搭建吧,此次搭建,包括環(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)。
意思就是,本來(lái)瀏覽器在顯示我們看到的網(wǎng)站的時(shí)候,會(huì)做很多事情,頁(yè)面渲染,js渲染等等,然后node把其中js渲染的引擎拿出來(lái),并且使用了谷歌的V8,然后在其外面又封裝了一層api,讓其擁有了文件讀寫,網(wǎng)絡(luò)等操作,提供了一個(gè)服務(wù)端的運(yùn)行環(huán)境,但卻是運(yùn)行的javascipt。
三、安裝Node.js
安裝有多種方式,,https://nodejs.org/en/ 可以直接在官網(wǎng),下載安裝版安裝,這種方式很簡(jiǎn)單粗暴,下一步就解決,就不多介紹了,介紹另一種方式,nvm安裝,因?yàn)橛袝r(shí)我們?cè)谑褂眠^(guò)程中,可能要用多種版本的node,而nvm可以讓我們?cè)谑褂眠^(guò)程方便的切換的使用版本。
第一步下面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
看到版本信息,就說(shuō)明安裝成功了
然后下載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)一起見(jiàn),我們需要安裝一個(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è)來(lái)切換鏡像源。
我們只要通過(guò)這個(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í)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Nodejs使用exceljs實(shí)現(xiàn)excel導(dǎo)入導(dǎo)出
在日常開發(fā)中,我們常需在后臺(tái)管理系統(tǒng)中實(shí)現(xiàn)數(shù)據(jù)的導(dǎo)入與導(dǎo)出功能,以便與?Excel?文件進(jìn)行交互,本文將使用使用exceljs實(shí)現(xiàn)excel導(dǎo)入導(dǎo)出功能,需要的可以參考下2024-03-03NodeJS 實(shí)現(xiàn)多語(yǔ)言的示例代碼
這篇文章主要介紹了NodeJS 實(shí)現(xiàn)多語(yǔ)言的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09在Node.js中實(shí)現(xiàn)關(guān)注列表和粉絲列表的方法示例
在社交網(wǎng)絡(luò)或者任何需要用戶交互的應(yīng)用中,實(shí)現(xiàn)關(guān)注和被關(guān)注的功能是非常常見(jiàn)的需求,本文將通過(guò)一個(gè)簡(jiǎn)單的例子,展示如何在Node.js環(huán)境下實(shí)現(xiàn)用戶的關(guān)注列表和粉絲列表,需要的朋友可以參考下2024-04-04Node.js實(shí)現(xiàn)發(fā)送郵件功能
這篇文章主要為大家詳細(xì)介紹了Node.js實(shí)現(xiàn)發(fā)送郵件功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11Node.js控制臺(tái)彩色輸出的方法與原理實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于Node.js控制臺(tái)彩色輸出的方法與原理的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Node.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12node.js中的http.response.write方法使用說(shuō)明
這篇文章主要介紹了node.js中的http.response.write方法使用說(shuō)明,本文介紹了http.response.write的方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12NodeJS配置CORS實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了NodeJS配置CORS實(shí)現(xiàn)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12