Node.js入門學(xué)習(xí)

Node.js學(xué)習(xí)

官方定義：

  • Node.js運(yùn)行環(huán)境是在Chrome的V8 JavaScript引擎上. Node.js應(yīng)用事件驅(qū)動,無阻塞I/O模型,所以輕量級且高效。
    Node.js的包管理npm，是最大的開源生態(tài)庫。

對于寫在瀏覽器里面的JavaScript，瀏覽器充當(dāng)了解析器的角色。而對于需要獨(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)置對象和方法做一些事情。例如運(yùn)行在瀏覽器
中的JS可以操作DOM，瀏覽器就提供了document之類的內(nèi)置對象。而運(yùn)行有Node.js中的JS是服務(wù)器端JS，可以操作系統(tǒng)文件和搭建HTTP服務(wù)器，相應(yīng)提供了fs、http等內(nèi)置對象。

安裝Node.js

macOS

    brew install node

Windows，?Node.js中文網(wǎng), 下載Node.js安裝.(盡量保證安裝路徑不要有空格，或者中文)

Paste_Image.png

Node.js的安裝會把?nodejs和npm命令加到PATH里面去，所以在命令行里面能夠訪問到node和npm

Paste_Image.png

檢查node版本及npm版本

Paste_Image.png

如何運(yùn)行

打開終端，鍵入node進(jìn)入命令交互模式，輸入".exit"退出node命令交互模式

Paste_Image.png

可以輸入一條代碼語句后立即執(zhí)行并顯示結(jié)果，例如：

Paste_Image.png

如果要運(yùn)行一大段代碼的話，可以先寫一個(gè)JS文件再運(yùn)行。例如有以下hello.js

Paste_Image.png

寫好后在終端下鍵入node hello.js
運(yùn)行，結(jié)果如下：

Paste_Image.png

熟悉windows以下幾個(gè)命令

  • tab(鍵) 自動補(bǔ)全命令
  • dir 列出當(dāng)前文件夾下的文件
  • cls 清屏
  • cd 目錄操作 cd..返回上一級目錄 cd 目錄名進(jìn)入下級目錄
  • mkdir 創(chuàng)建目錄
  • 向上鍵，向上鍵找到歷史命令
    當(dāng)前在C盤，如果想去到D盤的目錄，先D:
    注node交互模式下不能運(yùn)行命令行命令。

模塊

編寫稍大一點(diǎn)的程序時(shí)一般都會將代碼模塊化。在NodeJS中，一般將代碼合理拆分到不同的JS文件中，每一個(gè)文件就是一個(gè)模塊，而文件路徑就是模塊名。
在編寫每個(gè)模塊時(shí)，都有require exports module三個(gè)預(yù)先定義好的變量可供使用。

require

require函數(shù)加載別的模塊?！?/"開頭相對當(dāng)前目錄，字符開頭表示內(nèi)置模塊或者NODE_PATH下的模塊

    var foo1 = require('./foo');

exports

exports導(dǎo)出模塊的公有方法和屬性. 別的模塊通過require函數(shù)使用當(dāng)前模塊時(shí)得到的就是當(dāng)前模塊的exports
對象。以下例子中導(dǎo)出了一個(gè)公有方法。

exports.hello =  function () {
    console.log('hello world');
}

var fn=require("./hello");
fn.hello();

module

通過module對象可以訪問到當(dāng)前模塊的一些相關(guān)信息，但最多的用途是替換當(dāng)前模塊的導(dǎo)出對象。例如模塊導(dǎo)出對象默認(rèn)是一個(gè)普通對象，如果想改成一個(gè)函數(shù)的話，可以使用以下方式。

module.exports = function(){
    console.log('hello world');
}

var hello=require("./hello");
hello();

以上代碼中，模塊默認(rèn)導(dǎo)出對象被替換為一個(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.');
Paste_Image.png

NPM

NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，常見的使用場景有以下幾種：

  • 允許用戶從NPM服務(wù)器下載第三方包到本地使用
  • 允許用戶將自己編寫的包上傳到NPM服務(wù)器供別人用

可以看到，NPM建立了一個(gè)NodeJS生態(tài)圈，NodeJS開發(fā)者和用戶可以在里邊互通有無。以下分別介紹這三種場景下怎樣使用NPM。

選裝cnpm

  • 說明：因?yàn)閚pm安裝插件是從國外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常，如果npm的服務(wù)器在中國就好了，所以我們樂于分享的淘寶團(tuán)隊(duì)干了這事。來自官網(wǎng)：“這是一個(gè)完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鐘 一次以保證盡量與官方服務(wù)同步?！?/li>
  • 官方網(wǎng)址：http://npm.taobao.org
  • 安裝：命令提示符執(zhí)行
npm install cnpm -g --registry=https://registry.npm.taobao.org
  • 注意：安裝完后最好查看其版本號cnpm -v或關(guān)閉命令提示符重新打開，安裝完直接使用有可能會出現(xiàn)錯誤
Paste_Image.png

下載三方包

需要使用三方包時(shí)，首先得知道有哪些包可用。雖然npmjs.org提供了個(gè)搜索框可以根據(jù)包名來搜索，但如果連想使用的三方包的名字都不確定的話，就請百度一下吧。知道了包名后，比如上邊例子中的jquery，就可以在工程目錄下打開終端，使用以下命令來下載三方包。
安裝第三方包 "jquery" “--save”會保存包引入配置到package.json

npm install jquery --save

作為項(xiàng)目的開發(fā)依賴安裝

 npm install jquery --save-dev

下載好之后，jquery包就放在了工程目錄下的node_modules目錄中

Paste_Image.png

以上命令默認(rèn)下載最新版三方包，如果想要下載指定版本的話，可以在包名后邊加上@<version>，例如通過以下命令可下載2.1.0版的jquery

Paste_Image.png

package.json

Node.js項(xiàng)目配置文件,在項(xiàng)目目錄下初始化package.json

npm init

package.json內(nèi)容如下:

{
    "name":"demo",
    "main":"index.js" //定義入口文件
}

如果使用到的三方包比較多，在終端下一個(gè)包一條命令地安裝未免太人肉了。因此NPM對package.json的字段做了擴(kuò)展，允許在其中申明三方包依賴。因此，上邊例子中的package.json可以改寫如下：

{
  "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"
}

到目前為此我們寫的Node.js都是應(yīng)用在后臺。如果我們在前端項(xiàng)目里面引入Node.js管理，遇到需要npm包的時(shí)候，npm install就可以，不用管包的依賴。比如npm install a, a又依賴于b，那么根據(jù)a的package.json聲明，安裝a的同時(shí)也會安裝b。只需要一個(gè)npm install a，我們不需要關(guān)心a背后的依賴。這就是前端工程化的一部分。前段時(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
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

webpack就是構(gòu)建工具的一種，構(gòu)建工具是用來實(shí)現(xiàn)前端工程化的。前端框架和包越來越多，在github上有找一些資源，沒有構(gòu)建工具都無法運(yùn)行項(xiàng)目。學(xué)習(xí)構(gòu)建工具已經(jīng)很緊迫了。但是前端工程化能做更多。接下來，重點(diǎn)介紹Gulp(Gulp和webpack能結(jié)合起來使用)。Gulp學(xué)習(xí)傳送門

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Node.js是目前非?；馃岬募夹g(shù)，但是它的誕生經(jīng)歷卻很奇特。 眾所周知，在Netscape設(shè)計(jì)出JavaScri...
    w_zhuan閱讀 3,732評論 2贊 41
  • Node.js是目前非?；馃岬募夹g(shù)，但是它的誕生經(jīng)歷卻很奇特。 眾所周知，在Netscape設(shè)計(jì)出JavaScri...
    Myselfyan閱讀 4,203評論 2贊 58
  • JavaScript 模塊化編程 網(wǎng)站越來越復(fù)雜，js代碼、js文件也越來越多，會遇到什么問題？ 命名沖突； 文件...
    magic_pill閱讀 1,584評論 0贊 1
  • 總結(jié)一： [node.js總結(jié)](http://www.cnblogs.com/Darren_code/archi...
    xiumeiii閱讀 2,016評論 0贊 14
  • 近些年?關(guān)于中國傳統(tǒng)武術(shù)的爭議經(jīng)久不衰，武術(shù)傳承過程中的怪相不只是現(xiàn)今社會才出現(xiàn)的。徐皓峰的《倭寇蹤跡》就為我們展...
    d55a31d8c39e閱讀 1,057評論 0贊 1

友情鏈接更多精彩內(nèi)容