node.js從前端到全棧搭建的方法是什么

這篇文章主要介紹“node.js從前端到全棧搭建的方法是什么”，在日常操作中，相信很多人在node.js從前端到全棧搭建的方法是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”node.js從前端到全棧搭建的方法是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、什么是Node

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

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

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

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

Node.js的由來

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

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

Node.js的特性

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

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

• Node.js具有超強的高并發能力，能夠實現高性能服務器

• 開發周期短、開發成本低、學習成本低

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

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

二、瀏覽器環境與Node環境對比

看圖：

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

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

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

• 系統文件的讀寫（fs）

• 系統進程的管理（process）

• 網絡通信 (HTTP/HTTPS)

• 等等

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

三、搭建Node環境

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

打開Node官網：https://nodejs.org/zh-cn

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

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

出現版本號了就代表我們已經安裝成功了

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

四、體驗Node模塊化開發

在一個文件夾內隨便建兩個js文件，如下：

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

CommonJS方式

Node默認是CommonJS方式：

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

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

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

npm i nodemon -g

之后使用nodemon運行main.js：

nodemon .\main.js

其它的導出語法：

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

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

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

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

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

ES Modules方式

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

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

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

{
  "name": "node",
  "version": "1.0.0",
  "description": "node學習",
  "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規范，如果你使用ES Modules，去下載這些包時很可能會出現不兼容

語法：

const name = "Ailjx";

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

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

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

到此，關于“node.js從前端到全棧搭建的方法是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！