前言

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

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

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

一、什么是Node

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

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

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

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

Node.js的由來

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

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

Node.js的特性

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

• 的語法完全就是javascript和ES6的語法

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

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

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

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

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

看圖：

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

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

Node.js作為JavaScript的服務(wù)端運行環(huán)境，它可以解析JavaScript代碼（沒有瀏覽器安全級別的限制），并能夠為其提供很多系統(tǒng)級別的API，如：

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

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

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

如果你曾使用過npm，或者前端框架，相信你已經(jīng)搭建好了Node的環(huán)境，這里對沒有搭建過的朋友們再次演示一下：

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

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

之后在任意位置終端運行： node -v

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

我這里安裝的比較久了，所以版本號會比較老，不影響使用

四、體驗Node模塊化開發(fā)

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

因為Node的語法就是JavaScript的語法，所以使用Node進行模塊化開發(fā)的方式依舊是使用CommonJS或ES Modules，這里直接就進行演示，不再細(xì)說

CommonJS方式

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

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

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

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

npm i nodemon -g

之后使用nodemon運行main.js：

nodemon .\main.js

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

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

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

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

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

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

ES Modules方式

因為node默認(rèn)是使用CommonJS規(guī)范，所以我們在使用ES Modules時需要進行配置一下

先在文件夾下運行npm init生成package.json文件：

運行npm init后會一個個的讓你輸入信息，按照上圖提示填即可，最后生成的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"
}

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

不太建議使用ES Modules，因為npm倉庫里的包大多遵循的是CommonJS規(guī)范，如果你使用ES Modules，去下載這些包時很可能會出現(xiàn)不兼容

語法：

const name = "Ailjx";

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

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

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

結(jié)語

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

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

最新評論