Node.js學(xué)習(xí)
官方定義：
- Node.js運(yùn)行環(huán)境是在Chrome的V8 JavaScript引擎上. Node.js應(yīng)用事件驅(qū)動(dòng),無(wú)阻塞I/O模型,所以輕量級(jí)且高效。
Node.js的包管理npm，是最大的開(kāi)源生態(tài)庫(kù)。
對(duì)于寫(xiě)在瀏覽器里面的JavaScript，瀏覽器充當(dāng)了解析器的角色。而對(duì)于需要獨(dú)立運(yùn)行，Node.js就是一個(gè)解析器。每一種解析器都是一個(gè)運(yùn)行環(huán)境，不但允許JS定義各種數(shù)據(jù)結(jié)構(gòu)，進(jìn)行計(jì)算，還允許JS使用運(yùn)行環(huán)境提供的內(nèi)置對(duì)象和方法做一些事情。例如運(yùn)行在瀏覽器
中的JS可以操作DOM，瀏覽器就提供了document之類(lèi)的內(nèi)置對(duì)象。而運(yùn)行有Node.js中的JS是服務(wù)器端JS，可以操作系統(tǒng)文件和搭建HTTP服務(wù)器，相應(yīng)提供了fs、http等內(nèi)置對(duì)象。
安裝Node.js
macOS
brew install node
Windows，?Node.js中文網(wǎng), 下載Node.js安裝.(盡量保證安裝路徑不要有空格，或者中文)
Node.js的安裝會(huì)把?nodejs和npm命令加到PATH里面去，所以在命令行里面能夠訪(fǎng)問(wèn)到node和npm
檢查node版本及npm版本
如何運(yùn)行
打開(kāi)終端，鍵入node進(jìn)入命令交互模式，輸入".exit"退出node命令交互模式
可以輸入一條代碼語(yǔ)句后立即執(zhí)行并顯示結(jié)果，例如：
如果要運(yùn)行一大段代碼的話(huà)，可以先寫(xiě)一個(gè)JS文件再運(yùn)行。例如有以下hello.js
寫(xiě)好后在終端下鍵入node hello.js
運(yùn)行，結(jié)果如下：
熟悉windows以下幾個(gè)命令
-
tab(鍵) 自動(dòng)補(bǔ)全命令 -
dir列出當(dāng)前文件夾下的文件 -
cls清屏 -
cd目錄操作cd..返回上一級(jí)目錄cd 目錄名進(jìn)入下級(jí)目錄 -
mkdir創(chuàng)建目錄 - 向上鍵，向上鍵找到歷史命令
當(dāng)前在C盤(pán)，如果想去到D盤(pán)的目錄，先D:
注node交互模式下不能運(yùn)行命令行命令。
模塊
編寫(xiě)稍大一點(diǎn)的程序時(shí)一般都會(huì)將代碼模塊化。在NodeJS中，一般將代碼合理拆分到不同的JS文件中，每一個(gè)文件就是一個(gè)模塊，而文件路徑就是模塊名。
在編寫(xiě)每個(gè)模塊時(shí)，都有require exports module三個(gè)預(yù)先定義好的變量可供使用。
require
require函數(shù)加載別的模塊。“./"開(kāi)頭相對(duì)當(dāng)前目錄，字符開(kāi)頭表示內(nèi)置模塊或者NODE_PATH下的模塊
var foo1 = require('./foo');
exports
exports導(dǎo)出模塊的公有方法和屬性. 別的模塊通過(guò)require函數(shù)使用當(dāng)前模塊時(shí)得到的就是當(dāng)前模塊的exports
對(duì)象。以下例子中導(dǎo)出了一個(gè)公有方法。
exports.hello = function () {
console.log('hello world');
}
var fn=require("./hello");
fn.hello();
module
通過(guò)module對(duì)象可以訪(fǎng)問(wèn)到當(dāng)前模塊的一些相關(guān)信息，但最多的用途是替換當(dāng)前模塊的導(dǎo)出對(duì)象。例如模塊導(dǎo)出對(duì)象默認(rèn)是一個(gè)普通對(duì)象，如果想改成一個(gè)函數(shù)的話(huà)，可以使用以下方式。
module.exports = function(){
console.log('hello world');
}
var hello=require("./hello");
hello();
以上代碼中，模塊默認(rèn)導(dǎo)出對(duì)象被替換為一個(gè)函數(shù)。
HTTP服務(wù)器
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8080);
console.log('Server running on port 8080.');
NPM
NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問(wèn)題，常見(jiàn)的使用場(chǎng)景有以下幾種：
- 允許用戶(hù)從NPM服務(wù)器下載第三方包到本地使用
- 允許用戶(hù)將自己編寫(xiě)的包上傳到NPM服務(wù)器供別人用
可以看到，NPM建立了一個(gè)NodeJS生態(tài)圈，NodeJS開(kāi)發(fā)者和用戶(hù)可以在里邊互通有無(wú)。以下分別介紹這三種場(chǎng)景下怎樣使用NPM。
選裝cnpm
- 說(shuō)明：因?yàn)閚pm安裝插件是從國(guó)外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常，如果npm的服務(wù)器在中國(guó)就好了，所以我們樂(lè)于分享的淘寶團(tuán)隊(duì)干了這事。來(lái)自官網(wǎng)：“這是一個(gè)完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步。”
- 官方網(wǎng)址：http://npm.taobao.org
- 安裝：命令提示符執(zhí)行
npm install cnpm -g --registry=https://registry.npm.taobao.org
- 注意：安裝完后最好查看其版本號(hào)cnpm -v或關(guān)閉命令提示符重新打開(kāi)，安裝完直接使用有可能會(huì)出現(xiàn)錯(cuò)誤
下載三方包
需要使用三方包時(shí)，首先得知道有哪些包可用。雖然npmjs.org提供了個(gè)搜索框可以根據(jù)包名來(lái)搜索，但如果連想使用的三方包的名字都不確定的話(huà)，就請(qǐng)百度一下吧。知道了包名后，比如上邊例子中的jquery，就可以在工程目錄下打開(kāi)終端，使用以下命令來(lái)下載三方包。
安裝第三方包 "jquery" “--save”會(huì)保存包引入配置到package.json
npm install jquery --save
作為項(xiàng)目的開(kāi)發(fā)依賴(lài)安裝
npm install jquery --save-dev
下載好之后，jquery包就放在了工程目錄下的node_modules目錄中
以上命令默認(rèn)下載最新版三方包，如果想要下載指定版本的話(huà)，可以在包名后邊加上@<version>，例如通過(guò)以下命令可下載2.1.0版的jquery
package.json
Node.js項(xiàng)目配置文件,在項(xiàng)目目錄下初始化package.json
npm init
package.json內(nèi)容如下:
{
"name":"demo",
"main":"index.js" //定義入口文件
}
如果使用到的三方包比較多，在終端下一個(gè)包一條命令地安裝未免太人肉了。因此NPM對(duì)package.json的字段做了擴(kuò)展，允許在其中申明三方包依賴(lài)。因此，上邊例子中的package.json可以改寫(xiě)如下：
{
"name": "learnnode",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"jquery": "^2.1.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "",
"license": "ISC"
}
到目前為此我們寫(xiě)的Node.js都是應(yīng)用在后臺(tái)。如果我們?cè)谇岸隧?xiàng)目里面引入Node.js管理，遇到需要npm包的時(shí)候，npm install就可以，不用管包的依賴(lài)。比如npm install a, a又依賴(lài)于b，那么根據(jù)a的package.json聲明，安裝a的同時(shí)也會(huì)安裝b。只需要一個(gè)npm install a，我們不需要關(guān)心a背后的依賴(lài)。這就是前端工程化的一部分。前段時(shí)間我們學(xué)習(xí)Vue.js, 安裝Vue.js的時(shí)候，看到這樣的代碼
# 全局安裝 vue-cli
$ npm install -g vue-cli
# 創(chuàng)建一個(gè)基于 "webpack" 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴(lài)，走你
$ cd my-project
$ npm install
$ npm run dev
webpack就是構(gòu)建工具的一種，構(gòu)建工具是用來(lái)實(shí)現(xiàn)前端工程化的。前端框架和包越來(lái)越多，在github上有找一些資源，沒(méi)有構(gòu)建工具都無(wú)法運(yùn)行項(xiàng)目。學(xué)習(xí)構(gòu)建工具已經(jīng)很緊迫了。但是前端工程化能做更多。接下來(lái)，重點(diǎn)介紹Gulp(Gulp和webpack能結(jié)合起來(lái)使用)。Gulp學(xué)習(xí)傳送門(mén)
