在全棧應(yīng)用程序的后端和前端之間共享代碼可能是一項(xiàng)具有挑戰(zhàn)性的任務(wù)。然而，它對(duì)于構(gòu)建可維護(hù)和可擴(kuò)展的應(yīng)用程序至關(guān)重要。通過(guò)共享代碼，我們可以避免代碼重復(fù)、減少開(kāi)發(fā)時(shí)間并保持應(yīng)用程序之間的一致性。
在本教程中，我們將探索在 Node.js 和瀏覽器之間共享代碼的不同技術(shù)，并學(xué)習(xí)如何為我們的項(xiàng)目選擇最佳方法。
在 Node.js 和瀏覽器之間共享代碼的技術(shù)
用戶可以按照以下方法在node.js和瀏覽器之間共享代碼 –
CommonJS 模塊
CommonJS 模塊是在 Node.js 中組織和共享代碼的一種廣泛使用且簡(jiǎn)單的方法。許多 Node.js 包都是使用 CommonJS 模塊構(gòu)建的，因?yàn)樗鼈円子谑褂谩?/p>
但是，默認(rèn)情況下它們?cè)跒g覽器中不起作用。要在瀏覽器中使用 CommonJS 模塊，我們必須使用 Browserify 或 Webpack 等工具。這些工具可以創(chuàng)建可在 Node.js 和瀏覽器中運(yùn)行的單個(gè) JavaScript 文件。根據(jù)目標(biāo)環(huán)境，他們還可以將我們的代碼從 CommonJS 轉(zhuǎn)換為 ES 模塊，反之亦然。
如果我們正在構(gòu)建 Node.js 應(yīng)用程序并希望在瀏覽器中重用一些服務(wù)器端代碼，CommonJS 模塊是一個(gè)不錯(cuò)的選擇。
ES 模塊
ES 模塊是一種在 Web 瀏覽器和 Node.js 中組織和共享代碼的現(xiàn)代且原生的方式。它們使用簡(jiǎn)單，許多現(xiàn)代前端框架，例如 React 和 Vue.js，都支持開(kāi)箱即用的 ES 模塊
我們可以使用 npm 或 Yarn 等包管理器在 Node.js 和瀏覽器之間共享代碼。我們可以將代碼作為包發(fā)布，并使用包管理器將其安裝在兩個(gè)環(huán)境中。
如果我們想使用現(xiàn)代且標(biāo)準(zhǔn)化的方式在應(yīng)用程序的后端和前端之間組織和共享代碼，ES 模塊是一個(gè)很好的選擇。
通用 JavaScript
通用 JavaScript，也稱為同構(gòu) JavaScript，允許我們編寫在服務(wù)器和客戶端上運(yùn)行的代碼。這有助于提高性能、減少頁(yè)面加載時(shí)間并增強(qiáng) SEO。
通用 JavaScript 需要大量的前期配置，并且設(shè)置起來(lái)可能很復(fù)雜。此外，某些庫(kù)和 API 在服務(wù)器和客戶端上的工作方式可能不同，從而導(dǎo)致意外錯(cuò)誤。
如果我們需要構(gòu)建一個(gè)具有服務(wù)器端渲染的高性能且可擴(kuò)展的應(yīng)用程序，并且希望在后端和前端之間共享盡可能多的代碼，那么這是一個(gè)不錯(cuò)的選擇。
通過(guò)了解這三種方法，用戶可以選擇最適合其項(xiàng)目要求和開(kāi)發(fā)偏好的一種方法。
使用 Webpack 與瀏覽器共享 Node.js 代碼
像 Webpack 這樣的構(gòu)建工具是在 Node.js 和瀏覽器之間共享代碼的強(qiáng)大方法。用戶可以按照以下步驟使用 Webpack 在 Node.js 和瀏覽器之間共享代碼 –
第 1 步 – 首先，我們需要在我們的計(jì)算機(jī)上安裝 Webpack。
npm install --save-dev webpack webpack-cli
登錄后復(fù)制
第 2 步 – 接下來(lái)，我們需要?jiǎng)?chuàng)建一個(gè) Webpack 配置文件來(lái)指定如何捆綁我們的代碼。下面是該文件的一個(gè)簡(jiǎn)單示例：
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
}
};
登錄后復(fù)制
第 3 步 – 之后，我們可以像通常在 Node.js 或?yàn)g覽器中那樣編寫代碼。
第 4 步 – 現(xiàn)在，我們需要使用以下命令捆綁我們的代碼 –
npx webpack --mode=development
登錄后復(fù)制
第 5 步 – 最后，我們可以在 Node.js 或?yàn)g覽器應(yīng)用程序中使用該捆綁包，方法是將其包含在 HTML 文件中或在 Node.js 代碼中要求它。
例如，如果我們使用步驟 2 中的默認(rèn)配置，我們可以將包包含在 HTML 文件中，如下所示 –
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> My App </title>
</head>
<body>
<script src = "dist/bundle.js"> </script>
</body>
</html>
登錄后復(fù)制
示例
此示例演示如何使用通用 JavaScript 方法為 Node.js 和瀏覽器定義和導(dǎo)出函數(shù)。在myLibrary.js文件中，我們定義了兩個(gè)函數(shù)greet()和goodbye()，它們可以在Node.js和瀏覽器環(huán)境中使用。該代碼檢查模塊是否存在并導(dǎo)出 Node.js 的函數(shù)，同時(shí)將它們導(dǎo)出到瀏覽器的 window 對(duì)象。
在index.js文件中，我們使用require()函數(shù)導(dǎo)入myLibrary.js模塊，然后使用參數(shù)調(diào)用導(dǎo)出的函數(shù)goodbye()。
在index.html文件中，我們將myLibrary.js文件作為腳本標(biāo)記包含在內(nèi)，然后使用腳本標(biāo)記調(diào)用帶有參數(shù)的導(dǎo)出函數(shù)greet()。
通過(guò)這種方式，我們可以創(chuàng)建一個(gè)通用且可重用的代碼庫(kù)，可以在 Node.js 和瀏覽器環(huán)境中使用，并且代碼在每個(gè)環(huán)境中都可以正確運(yùn)行。
myLibrary.js
if (typeof module !== 'undefined' && module.exports) {
// code for Node.js
module.exports = {
// exported functions or objects for Node.js
greet: function(name) {
console.log('Hello, ' + name + '!');
},
goodbye: function(name) {
console.log('Goodbye, ' + name + '!');
}
};
} else {
// code for the browser
window.myLibrary = {
// exported functions or objects for the browser
greet: function(name) {
alert('Hello, ' + name + '!');
},
goodbye: function(name) {
alert('Goodbye, ' + name + '!');
}
};
}
登錄后復(fù)制
index.js
const myLibrary = require('./myLibrary');
myLibrary.goodbye('Subham');
登錄后復(fù)制
index.html
<html lang="en">
<head>
<title> NodeJs & Browser </title>
</head>
<body>
<script src = "myLibrary.js" > </script>
<script>
myLibrary.greet('Subham');
</script>
</body>
</html>
登錄后復(fù)制
輸出
在本教程中，用戶學(xué)習(xí)了在 Node.js 和瀏覽器之間共享代碼的不同技術(shù)，包括 CommonJS 模塊、ES 模塊和通用 JavaScript。每種方法都有其優(yōu)點(diǎn)和缺點(diǎn)，選擇取決于項(xiàng)目要求和開(kāi)發(fā)偏好。
按照本教程中提到的步驟，用戶可以創(chuàng)建一個(gè) Webpack 配置文件，指定如何捆綁其代碼，從而允許他們像通常在 Node.js 或?yàn)g覽器中一樣編寫代碼。我們還看到了如何使用通用 JavaScript 方法為 Node.js 和瀏覽器定義導(dǎo)出函數(shù)的示例。
以上就是如何在 Node.js 和瀏覽器之間共享代碼？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
