node環(huán)境安裝

• 1.什么是Node.js?

  • Node.js 是一個(gè)基于"Chrome V8 引擎" 的JavaScript "運(yùn)行環(huán)境"

• 2.什么是V8引擎?

  • V8引擎是一款專門解釋和執(zhí)行JS代碼的虛擬機(jī), 任何程序只要集成了V8引擎都可以執(zhí)行JS代碼
    例如:
    • 將V8引擎嵌入到瀏覽器中姜盈，那么我們寫的JavaScript代碼就會(huì)被瀏覽器所執(zhí)行旨枯；
    • 將V8引擎嵌入到NodeJS中掏导，那么我們寫的JavaScript代碼就會(huì)被NodeJS所執(zhí)行鲫凶。

• 3.什么是運(yùn)行環(huán)境?

  • 運(yùn)行環(huán)境 就是 生存環(huán)境
  • 地球是人類的生存環(huán)境
  • 瀏覽器是網(wǎng)頁(yè)的生存環(huán)境
  • windows是.exe應(yīng)用程序的生存環(huán)境
  • Android是.apk應(yīng)用程序的生存環(huán)境
  • 也就是說運(yùn)行環(huán)境就是特定事物的生存環(huán)境...
  • NodeJS也是一個(gè)生存的環(huán)境,由于NodeJS中集成了V8引擎.所以NodeJS是JavaScript應(yīng)用程序的一個(gè)生存環(huán)境

• 4.總結(jié):

  • NodeJS不是一門編程語(yǔ)言,NodeJS是一個(gè)運(yùn)行環(huán)境
  • 由于這個(gè)運(yùn)行環(huán)境集成了V8引擎,所以在這個(gè)運(yùn)行環(huán)境下可以運(yùn)行我們編寫的JS代碼
  • 這個(gè)運(yùn)行環(huán)境最大的特點(diǎn)就是提供了操作"操作系統(tǒng)底層的API",通過這些底層API我們可以編寫出網(wǎng)頁(yè)中無法實(shí)現(xiàn)的功能(諸如: 打包工具, 網(wǎng)站服務(wù)器等)

Node環(huán)境搭建

• 搭建方式一:

  • 1.官網(wǎng)下載.msi安裝包: https://nodejs.org/zh-cn/
  • 2.全程下一步
  • 3.在命令行工具中輸入 node -v

• 搭建方式二:

  • 1.官網(wǎng)下載.zip安裝包: https://nodejs.org/zh-cn/
  • 2.解壓下載好的安裝包
  • 3.在"高級(jí)系統(tǒng)設(shè)置"中手動(dòng)配置環(huán)境變量
  • 4.在命令行工具中輸入 node -v

• 搭建方式三(企業(yè)開發(fā)用刁绒，推薦):

  • 1.下載NVM: https://github.com/coreybutler/nvm-windows
  • 2.在D盤創(chuàng)建dev目錄
  • 3.在Dev目中中創(chuàng)建兩個(gè)子目錄nvm和nodejs, 并且把nvm包解壓進(jìn)去nvm目錄中
  • 4.在install.cmd文件上面右鍵選擇【以管理員身份運(yùn)行】,在終端中直接按下回車,將彈出的文件另存為到NVM目錄
  • 5.打開settings.txt文件.
    修改root: D:\Developer\Dev\NVM
    path: D:\Developer\Dev\Node

• 6.配置環(huán)境變量
  NVM_HOME: D:\Developer\Dev\NVM
  NVM_SYMLINK: D:\Developer\Dev\Node
  在Path中添加 %NVM_HOME% %NVM_SYMLINK%

• 7.在命令行工具中輸入 nvm version

• NVM常用命令

  • nvm list 查看當(dāng)前安裝的Node.js所有版本
  • nvm install 版本號(hào) 安裝指定版本的Node.js
  • nvm uninstall 版本號(hào) 卸載指定版本的Node.js
  • nvm use 版本號(hào) 選擇指定版本的Node.js

Node程序執(zhí)行

• Node程序執(zhí)行方式:
  • 1.由于瀏覽器中集成了V8引擎,所以瀏覽器可以解釋執(zhí)行JS代碼
    • 1.1可以直接在瀏覽器控制臺(tái)中執(zhí)行JS代碼
    • 1.2可以在瀏覽器中執(zhí)行JS文件中的JS代碼
  • 2.由于NodeJS中也集成了V8引擎,所以瀏覽器可以解釋執(zhí)行JS代碼
    • 2.1可以直接在命令行工具中編寫執(zhí)行JS代碼(REPL -- Read Eval Print Loop:交互式解釋器)
    • 2.2可以在命令行工具中執(zhí)行JS文件中的JS代碼
    • 2.3可以在webstorm中配置node.js球及，然后在文件中執(zhí)行（==工作中推薦方式==）

Node環(huán)境和瀏覽器環(huán)境區(qū)別

• Node環(huán)境和瀏覽器環(huán)境區(qū)別

  • NodeJS環(huán)境和瀏覽器環(huán)境一樣都是一個(gè)JS的運(yùn)行環(huán)境,都可以執(zhí)行JS代碼.但是由于宿主不同所以特點(diǎn)也有所不同

• 1.內(nèi)置對(duì)象不同

  • 瀏覽器環(huán)境中提供了window全局對(duì)象
  • NodeJS環(huán)境中的全局對(duì)象不叫window, 叫g(shù)lobal

• 2.this默認(rèn)指向不同

  • 瀏覽器環(huán)境中全局this默認(rèn)指向window
  • NodeJS環(huán)境中全局this默認(rèn)指向空對(duì)象{}

• 3.API不同

  • 瀏覽器環(huán)境中提供了操作節(jié)點(diǎn)的DOM相關(guān)API和操作瀏覽器的BOM相關(guān)API
  • NodeJS環(huán)境中沒有HTML節(jié)點(diǎn)也沒有瀏覽器, 所以NodeJS環(huán)境中沒有DOM/BOM

Node全局對(duì)象上的屬性

• 全局對(duì)象上的屬性
  • __dirname: 當(dāng)前文件所在文件夾的絕對(duì)路徑
  • __filename: 當(dāng)前文件的絕對(duì)路徑
  • setInterval/clearInterval:和瀏覽器中window對(duì)象上的定時(shí)器一樣芋忿，無限執(zhí)行的定時(shí)器
  • setTimeout / clearTimeout : 和瀏覽器中window對(duì)象上的定時(shí)器一樣,僅執(zhí)行一次的定時(shí)器
  • console : 和瀏覽器中window對(duì)象上的打印函數(shù)一樣

和瀏覽器一樣Node環(huán)境中的全局對(duì)象也提供了很多方法屬性供我們使用
中文文檔地址: http://nodejs.cn/api/

Node模塊

• 什么是模塊?
  • 1.1瀏覽器開發(fā)中的模塊,在瀏覽器開發(fā)中為了避免命名沖突,方便維護(hù)等等.我們采用類或者立即執(zhí)行函數(shù)的方式來封裝JS代碼,來避免命名沖突和提升代碼的維護(hù)性.其實(shí)這里的一個(gè)類或者一個(gè)立即執(zhí)行函數(shù)就是瀏覽器開發(fā)中一個(gè)模塊

let obj = {
    模塊中的業(yè)務(wù)邏輯代碼
};
;(function(){
   模塊中的業(yè)務(wù)邏輯代碼
   window.xxx = xxx;
})();

• 存在的問題: 沒有標(biāo)準(zhǔn),沒有規(guī)范

• 1.2NodeJS開發(fā)中的模塊

  • NodeJS采用CommonJS規(guī)范實(shí)現(xiàn)了模塊系統(tǒng)

• 1.3CommonJS規(guī)范

  • CommonJS規(guī)范規(guī)定了如何定義一個(gè)模塊,如何暴露(導(dǎo)出)模塊中的變量函數(shù),以及如何使用定義好的模塊
    • 在CommonJS規(guī)范中一個(gè)文件就是一個(gè)模塊
    • 在CommonJS規(guī)范中每個(gè)文件中的變量函數(shù)都是私有的，對(duì)其他文件不可見的
    • 在CommonJS規(guī)范中每個(gè)文件中的變量函數(shù)必須通過exports暴露(導(dǎo)出)之后其它文件才可以使用
    • 在CommonJS規(guī)范中想要使用其它文件暴露的變量函數(shù)必須通過require('路徑')導(dǎo)入模塊才可以使用
    • 示例：

// 第一個(gè)Js文件
let name = '微雙';
function sum(a,b) {
    return a + b;
}
exports.str = name;
exports.fn = sum;

// 第二個(gè)js文件
let newFn = require('./try'); // './try'就是第一個(gè)Js文件的路徑

console.log(newFn.str);
console.log(newFn.fn);
let res = newFn.fn(10, 20);
console.log(res);

Node模塊導(dǎo)出數(shù)據(jù)幾種方式

• 1.在NodeJS中想要導(dǎo)出模塊中的變量函數(shù)有三種方式

  • 1.1通過exports.xxx = xxx導(dǎo)出（==推薦==）
  • 1.2通過module.exports.xxx = xxx導(dǎo)出（==推薦==）
  • 1.3通過global.xxx = xxx導(dǎo)出（不推薦）

• ==注意點(diǎn)==

  • 無論通過哪種方式導(dǎo)出,使用時(shí)都需要先導(dǎo)入(require)才能使用
  • 通過global.xxx方式導(dǎo)出不符合CommonJS規(guī)范, 不推薦使用

exports和module.exports區(qū)別

• 1.exports和module.exports區(qū)別

  • exports只能通過exports.xxx方式導(dǎo)出數(shù)據(jù), 不能直接賦值
  • module.exports既可以通過module.exports.xxx方式導(dǎo)出數(shù)據(jù), 也可以直接賦值

• 注意點(diǎn)

  • ==在企業(yè)開發(fā)中無論哪種方式都不要直接賦值, 這個(gè)問題只會(huì)在面試中出現(xiàn)==

require注意點(diǎn)

• 1.require導(dǎo)入模塊時(shí)可以不添加導(dǎo)入模塊的類型
  • 如果沒有指定導(dǎo)入模塊的類型,那么會(huì)依次查找.js .json .node文件.無論是三種類型中的哪一種, 導(dǎo)入之后都會(huì)轉(zhuǎn)換成JS對(duì)象返回給我們
• 2.導(dǎo)入自定義模塊時(shí)必須指定路徑
  • require可以導(dǎo)入"自定義模塊(文件模塊)"绒北、"系統(tǒng)模塊(核心模塊)"、"第三方模塊"
  • 導(dǎo)入"自定義模塊"模塊時(shí)前面必須加上路徑
  • 導(dǎo)入"系統(tǒng)模塊"和"第三方模塊"是不用添加路徑
    • 不用添加路徑的原因:
      • 如果是"系統(tǒng)模塊"直接到環(huán)境變量配置的路徑中查找
      • 如果是"第三方模塊"會(huì)按照module.paths數(shù)組中的路徑依次查找

Node包和包管理

• 1.什么是包?

  • 前面說過在編寫代碼的時(shí)候盡量遵守單一原則,也就是一個(gè)函數(shù)盡量只做一件事情
    • 例如:讀取數(shù)據(jù)函數(shù)/寫入數(shù)據(jù)函數(shù)/生成隨機(jī)數(shù)函數(shù)等等,不要一個(gè)函數(shù)既讀取數(shù)據(jù)又寫入數(shù)據(jù)又生成隨機(jī)數(shù),這樣代碼非常容易出錯(cuò), 也非常難以維護(hù)
  • 在模塊化開發(fā)中也一樣,在一個(gè)模塊(一個(gè)文件中)盡量只完成一個(gè)特定的功能.但是有些比較復(fù)雜的功能可能需要由多個(gè)模塊組成
    • 例如: jQuery選擇器相關(guān)的代碼在A模塊, CSS相關(guān)的代碼在B模塊...我們需要把這些模塊組合在一起才是完成的jQuery
    • 那么這個(gè)時(shí)候我們就需要一個(gè)東西來維護(hù)多個(gè)模塊之間的關(guān)系
  • 這個(gè)維護(hù)多個(gè)模塊之間關(guān)系的東西就是"包"
  • 簡(jiǎn)而言之: 一個(gè)模塊是一個(gè)單獨(dú)的文件, 一個(gè)包中可以有一個(gè)或多個(gè)模塊

• 2.NodeJS包的管理

  • 在NodeJS中為了方便開發(fā)人員發(fā)布察署、安裝和管理包, NodeJS推出了一個(gè)包管理工具NPM(Node Package Manager)
  • NPM不需要我們單獨(dú)安裝,只要搭建好NodeJS環(huán)境就已經(jīng)自動(dòng)安裝好了
  • NPM就相當(dāng)于電腦上的"QQ管家軟件助手",通過NPM我們可以快速找到我們需要的包,可以快速安裝我們需要的包,可以快速刪除我們不想要的包等等

NPM使用

• 1.NPM包安裝方式

  • 全局安裝 (一般用于安裝全局使用的工具, 存儲(chǔ)在全局node_modules中)
    • npm install -g 包名 (默認(rèn)安裝最新版本)
    • npm uninstall -g 包名 (卸載)
    • npm update -g 包名 (更新版本) (更新失敗可以直接使用install,也就是安裝最新版本的指令)
  • 本地安裝 (一般用于安裝當(dāng)前項(xiàng)目使用的包,存儲(chǔ)在當(dāng)前項(xiàng)目node_modules中)
    • npm install 包名
    • npm uninstall 包名
    • npm update 包名

• 2.初始化本地包

  • npm init -> 初始化package.json文件
  • npm init -y -> 初始化package.json文件
  • npm install 包名 --save
  • npm install 包名 --save-dev

• 初始化的package.json文件,也就是包描述文件,它定義了當(dāng)前項(xiàng)目所需要的各種模塊闷游，以及項(xiàng)目的配置信息（比如名稱、版本贴汪、許可證等元數(shù)據(jù)）储藐。

  • npm install命令根據(jù)這個(gè)配置文件，自動(dòng)下載所需的模塊嘶是，也就是配置項(xiàng)目所需的運(yùn)行和開發(fā)環(huán)境
    • 注意點(diǎn):==package.json文件中,不能加入任何注釋==
  • dependencies：生產(chǎn)環(huán)境包的依賴，一個(gè)關(guān)聯(lián)數(shù)組蛛碌，由包的名稱和版本號(hào)組成
  • devDependencies：開發(fā)環(huán)境包的依賴聂喇，一個(gè)關(guān)聯(lián)數(shù)組，由包的名稱和版本號(hào)組成

• 注意：

  • 1.將項(xiàng)目拷貝給其它人, 或者發(fā)布的時(shí)候, 我們不會(huì)將node_modules也給別人, 因?yàn)樘笪敌Ｖ恍杞o.json文件即可希太，根據(jù).json文件里的描述就可以下載對(duì)應(yīng)的包
  • 2.因?yàn)橛械陌赡苤辉陂_發(fā)階段需要,但是在上線階段不需要, 所以需要分開指定
    • npm i npm i --development npm stall --development指令： 所有的包都會(huì)被安裝（就是dependencies和devDependencies里的都會(huì)安裝）
    • npm i --production指令： 只會(huì)安裝dependencies中的包

NRM和CNPM使用

• 由于npm默認(rèn)回去國(guó)外下載資源,所以對(duì)于國(guó)內(nèi)開發(fā)者來說下載會(huì)比較慢≡脱眩可以將資源下載地址從國(guó)外切換到國(guó)內(nèi)誊辉，兩種方法：
  • 1.nrm工具（==推薦使用這個(gè)==）
    • npm install -g nrm指令： 安裝NRM
    • nrm --version指令： 查看是否安裝成功
    • npm ls指令：查看允許切換的資源地址
    • npm use taobao指令： 將下載地址切換到淘寶
      • PS:淘寶資源地址和國(guó)外的地址內(nèi)容完全同步,淘寶鏡像與官方同步頻率目前為10分鐘，一次以保證盡量與官方服務(wù)同步
  • 2.cnpm指令（不推薦亡脑，試驗(yàn)時(shí)報(bào)錯(cuò)了未解決）
    • 只不過是將所有的指令從npm變?yōu)閏npm而已
      • npm install cnpm -g –registry=https://registry.npm.taobao.org 安裝CNPM
      • cnpm -v 查看是否安裝成功
      • 使用方式同npm
        • 例如: npm install jquery 變成cnpm install jquery 即可

YARN使用及與NPM的區(qū)別（理解即可）

• 1.什么是YARN?

  • Yarn是由Facebook堕澄、Google、Exponent 和 Tilde 聯(lián)合推出了一個(gè)新的 JS 包管理工具
  • ==Yarn 是為了彌補(bǔ)npm5.0之前的一些缺陷而出現(xiàn)的==

• ==注意點(diǎn)==:

  • 在npm5.0之前霉咨，yarn的優(yōu)勢(shì)特別明顯.但是現(xiàn)在NPM已經(jīng)更新到6.9.x甚至7.x了,隨著NPM的升級(jí)NPM優(yōu)化甚至超越Y(jié)arn,所以個(gè)人還是建議使用NPM

• 2.NPM5.0之前的缺陷:

  • 2.1npm install的時(shí)候巨慢蛙紫，npm是按照隊(duì)列執(zhí)行每個(gè)package，也就是說必須要等到當(dāng)前 package 安裝完成之后途戒，才能繼續(xù)后面的安裝（串行安裝）
  • 2.2同一個(gè)項(xiàng)目坑傅，npm install的時(shí)候無法保持一致性
    • “5.0.3”表示安裝指定的5.0.3版本，
    • “~5.0.3”表示安裝5.0.X中最新的版本喷斋，
    • “^5.0.3”表示安裝5.X.X中最新的版本

• 3.YARN優(yōu)點(diǎn):

  • 3.1速度快:
    • 并行安裝:Yarn是同步執(zhí)行所有任務(wù)唁毒，提高了性能
    • 離線模式：如果之前已經(jīng)安裝過一個(gè)軟件包，用Yarn再次安裝時(shí)之間從緩存中獲取星爪，就不用像npm那樣再?gòu)木W(wǎng)絡(luò)下載了
  • 3.2安裝版本統(tǒng)一：
    • 為了防止拉取到不同的版本浆西，Yarn有一個(gè)鎖定文件(lock file),記錄了被確切安裝上的模塊的版本號(hào)

• 4.YARN的安裝和NPM的安裝

  • npm install -g yarn
  • yarn --version

• 5.YARN和NPM的使用

  • 5.1初始化包
    • npm init -y
    • yarn init -y
  • 5.2安裝包
    • npm install xxx --save
    • yarn add xxx
    • npm install xxx --save-dev
    • yarn add xxx --dev
  • 5.3移除包
    • npm uninstall xxx
    • yarn remove xxx
  • 5.4更新包
    • npm update xxx
    • yarn upgrade xxx --latest
  • 5.5全局安裝
    • npm install -g xxx
    • yarn global add xxx
  • 5.6全局刪除
    • npm uninstall -g xxx
    • yarn global upgrade xxx
  • 5.7全局更新
    • npm update -g xxx
    • yarn global remove xxx