前言

對(duì)于前端開(kāi)發(fā)的朋友們，是否有這樣的煩惱或需求：

• 想要開(kāi)發(fā)一個(gè)心儀的項(xiàng)目但沒(méi)有后端朋友的合作，而只能使用mock？
• 與后端合作開(kāi)發(fā)中總感覺(jué)約束，不能很好的交流所想，從而拖慢進(jìn)度？
• 不甘心自己只能和他人合作開(kāi)發(fā)，想要自己獨(dú)立實(shí)現(xiàn)效果？
• 想提高自己的地位，豐富自己的知識(shí)面，從而能夠在團(tuán)隊(duì)中獨(dú)當(dāng)一面？
• 習(xí)慣了個(gè)人開(kāi)發(fā)，自由慣了，不想隨波逐流服從安排？
• 等等

當(dāng)你有這些問(wèn)題時(shí)，就該是時(shí)候問(wèn)問(wèn)自己是不是想要發(fā)展為全棧，如果是，那么學(xué)習(xí)node.js就該是你進(jìn)擊全棧的必經(jīng)之路！

一、什么是Node

node.js是一個(gè)JavaScript運(yùn)行環(huán)境，它讓JavaScript可以開(kāi)發(fā)后端程序，實(shí)現(xiàn)幾乎其他后端語(yǔ)言實(shí)現(xiàn)的所有功能！

這意味著我們只需要掌握javaScript一門語(yǔ)言就能夠進(jìn)行全棧開(kāi)發(fā)！

學(xué)習(xí)Node我們可以非常平滑的過(guò)渡到全棧開(kāi)發(fā)，并且如果你之前學(xué)習(xí)過(guò)Vue，React等前端框架或者Webpack這些，那么其實(shí)你就已經(jīng)接觸過(guò)Node了，因?yàn)樗鼈兌际墙⒂贜ode基礎(chǔ)上的，如：
Vue、React的腳手架：Vue-cli，create-react-app，vite等（這也就是為什么使用這些框架時(shí)需要安裝Node環(huán)境）

對(duì)于前端開(kāi)發(fā)經(jīng)常用的npm，它是NodeJS包管理和分發(fā)工具，其實(shí)就相當(dāng)于是Node的開(kāi)源倉(cāng)庫(kù)（并且是全球最大的開(kāi)源倉(cāng)庫(kù)）
我們可以使用npm指令去下載這個(gè)倉(cāng)庫(kù)里的指定項(xiàng)目進(jìn)行使用（如運(yùn)行npm i axios 下載這個(gè)倉(cāng)庫(kù)里的axios）
當(dāng)然我們也可以開(kāi)發(fā)自己的插件項(xiàng)目通過(guò)npm指令上傳到這個(gè)倉(cāng)庫(kù)里

Node.js的由來(lái)

Node.js基于V8引擎，而V8其實(shí)是Google發(fā)布的開(kāi)源JavaScript引擎，本身是用于Chrome瀏覽器的js解釋部分，但是總有大佬不按套路出牌，Node之父Ryan Dahl就把這個(gè)V8搬到了服務(wù)器上，用于做服務(wù)器的軟件

Node.js發(fā)布于2009年5月，經(jīng)過(guò)十幾年的發(fā)展，它已經(jīng)成為前端中頂梁柱的存在，就算你不需要它進(jìn)行服務(wù)端開(kāi)發(fā)，它也存在于你開(kāi)發(fā)過(guò)程中的方方面面，如前面提到的Vue，React，Webpack

Node.js的特性

• Node.js貫穿于客戶端（如Vue這類框架的底層依賴）和服務(wù)端（如后端開(kāi)發(fā)）

• 的語(yǔ)法完全就是javascript和ES6的語(yǔ)法

• Node.js具有超強(qiáng)的高并發(fā)能力，能夠?qū)崿F(xiàn)高性能服務(wù)器

• 開(kāi)發(fā)周期短、開(kāi)發(fā)成本低、學(xué)習(xí)成本低

單論后端開(kāi)發(fā)，Node.js作為JavaScript的運(yùn)行環(huán)境的性能雖不能與Java這類編譯語(yǔ)言相比，但它獨(dú)有的特性完全可以彌補(bǔ)這性能的差距，甚至能夠進(jìn)行超越！這也就是為什么它能夠發(fā)展如此之快，能夠受到越來(lái)越多人青睞的原因！

看到這里你可能已經(jīng)明白，為什么我會(huì)說(shuō)Node是前端到全棧的必經(jīng)之路

二、瀏覽器環(huán)境與Node環(huán)境對(duì)比

看圖：

圖畫(huà)的不好，湊合著看（操作系統(tǒng)包括網(wǎng)卡/硬盤/本地文件等等，一般是windows或max或linux等等）

從圖上看，好像Node環(huán)境就只是瀏覽器環(huán)境的一部分，但其實(shí)不然，在瀏覽器環(huán)境中我們很難觸控到操作系統(tǒng)那一層，這是因?yàn)榫哂袨g覽器安全級(jí)別的限制（不限制的話，瀏覽器上的網(wǎng)頁(yè)就能直接操控操作系統(tǒng)，這還能了得？）

Node.js作為JavaScript的服務(wù)端運(yùn)行環(huán)境，它可以解析JavaScript代碼（沒(méi)有瀏覽器安全級(jí)別的限制），并能夠?yàn)槠涮峁┖芏嘞到y(tǒng)級(jí)別的API，如：

• 系統(tǒng)文件的讀寫(xiě)（fs）
• 系統(tǒng)進(jìn)程的管理（process）
• 網(wǎng)絡(luò)通信 (HTTP/HTTPS)
• 等等

但這也同樣代表在Node.js中我們無(wú)法使用瀏覽器提供的API，如window對(duì)象，更不能操作DOM元素

三、搭建Node環(huán)境

如果你曾使用過(guò)npm，或者前端框架，相信你已經(jīng)搭建好了Node的環(huán)境，這里對(duì)沒(méi)有搭建過(guò)的朋友們?cè)俅窝菔疽幌拢?/p>

打開(kāi)Node官網(wǎng)：https://nodejs.org/zh-cn

推薦下載這個(gè)長(zhǎng)期維護(hù)的穩(wěn)定版本，下載完成后一路Next安裝即可

之后在任意位置終端運(yùn)行： node -v

出現(xiàn)版本號(hào)了就代表我們已經(jīng)安裝成功了

我這里安裝的比較久了，所以版本號(hào)會(huì)比較老，不影響使用

四、體驗(yàn)Node模塊化開(kāi)發(fā)

在一個(gè)文件夾內(nèi)隨便建兩個(gè)js文件，如下：

因?yàn)镹ode的語(yǔ)法就是JavaScript的語(yǔ)法，所以使用Node進(jìn)行模塊化開(kāi)發(fā)的方式依舊是使用CommonJS或ES Modules，這里直接就進(jìn)行演示，不再細(xì)說(shuō)

CommonJS方式

Node默認(rèn)是CommonJS方式：

// index.js???????
const name = "Ailjx";
// 導(dǎo)出方法一：module.exports直接導(dǎo)出
// 直接對(duì)module.exports賦值時(shí)，main.js中導(dǎo)入的就是這個(gè)賦值
// 多個(gè)module.exports賦值時(shí)，只生效最后一個(gè)，即最后一個(gè)會(huì)替代前面的
module.exports = name;

在文件夾終端運(yùn)行node js文件路徑命令就能使用node來(lái)運(yùn)行指定的js文件，console.log打印結(jié)果在終端進(jìn)行顯示

每次修改main.js文件后需要重新運(yùn)行命令node .\main.js執(zhí)行main.js文件，這顯然不太方便，我們可以安裝nodemon這個(gè)插件來(lái)幫我們自動(dòng)運(yùn)行：

npm i nodemon -g

之后使用nodemon運(yùn)行main.js：

nodemon .\main.js

其它的導(dǎo)出語(yǔ)法：

// index.js???????
const name = "Ailjx";

// 導(dǎo)出方法一：module.exports直接導(dǎo)出
// 直接對(duì)module.exports賦值時(shí)，main.js中導(dǎo)入的就是這個(gè)賦值
// 多個(gè)module.exports賦值時(shí)，只生效最后一個(gè)，即最后一個(gè)會(huì)替代前面的
module.exports = name;

// 導(dǎo)出方法二：module.exports導(dǎo)出對(duì)象
// main.js里n接受的是一個(gè)對(duì)象{ NNNN: 'Ailjx' }
module.exports = {
    NNNN: name, // 順便起個(gè)別名
    // 可以繼續(xù)導(dǎo)出其它內(nèi)容
};

// 導(dǎo)出方法三：exports.key值=內(nèi)容
// main.js里n接受的是一個(gè)對(duì)象{ Myname: 'Ailjx', Myname2: 'Ailjx' }
// 使用多個(gè) exports.key值=內(nèi)容 時(shí)最終會(huì)合并成一個(gè)大對(duì)象（相同key值的會(huì)覆蓋），而不是像多個(gè)module.exports賦值時(shí)，只生效最后一個(gè)
// exports.key值與module.exports一起使用時(shí)會(huì)被module.exports替代
exports.Myname = name;
exports.Myname2 = name;

// 導(dǎo)出方法四：exports.key值=對(duì)象
// main.js里n接受的是一個(gè)對(duì)象：{ Myname: { A: 'Ailjx' } }
exports.Myname = {
    A: name, // 順便起個(gè)別名
    // 導(dǎo)出其它內(nèi)容
};

ES Modules方式

因?yàn)閚ode默認(rèn)是使用CommonJS規(guī)范，所以我們?cè)谑褂肊S Modules時(shí)需要進(jìn)行配置一下

先在文件夾下運(yùn)行npm init生成package.json文件：

運(yùn)行npm init后會(huì)一個(gè)個(gè)的讓你輸入信息，按照上圖提示填即可，最后生成的package.json文件如下：

{???????
  "name": "node",
  "version": "1.0.0",
  "description": "node學(xué)習(xí)",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Ailjx",
  "license": "MIT"
}

我們?cè)?package.json中加上一行 "type": "module",即可切換使用ES Modules方式，這時(shí)就不能再使用CommonJS方式了（二選一）

不太建議使用ES Modules，因?yàn)閚pm倉(cāng)庫(kù)里的包大多遵循的是CommonJS規(guī)范，如果你使用ES Modules，去下載這些包時(shí)很可能會(huì)出現(xiàn)不兼容

語(yǔ)法：

const name = "Ailjx";

// 接口暴露方法一：export default默認(rèn)導(dǎo)出
// 一個(gè)文件只能有一個(gè)export default
// main.js使用：import n from "./index.js";進(jìn)行導(dǎo)入，n自己隨便起名，它的值為Ailjx
// export default name;

// 接口暴露方法二：export導(dǎo)出對(duì)象
// main.js使用：import { MyName } from "./index.js";進(jìn)行導(dǎo)入
export {
    name as MyName, // 順便使用as改個(gè)別名
    // 導(dǎo)出其它成員
};

// export default 可以和 export導(dǎo)出對(duì)象 一起使用，一起使用時(shí)：
// main.js使用：import n, { MyName } from "./index.js";進(jìn)行導(dǎo)入，n和MyName的值都為Ailjx

結(jié)語(yǔ)

只學(xué)習(xí)Node，并不能讓你真正的發(fā)展為全棧大佬，學(xué)習(xí)Node只是讓前端人員能夠非?？?，非常絲滑的過(guò)渡到全棧，為之后的學(xué)習(xí)發(fā)展奠定基礎(chǔ)，如果想要成為真正的全棧大佬，像Java這類的編譯語(yǔ)言以及一些其它方面的技術(shù)肯定還是要學(xué)習(xí)的

到此這篇關(guān)于node.js從前端到全棧的必經(jīng)之路的文章就介紹到這了,更多相關(guān)node.js前端到全棧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論