資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 Node.js 和瀏覽器之間共享程式碼？
在全棧應用程式的後端和前端之間共享程式碼可能是一項具有挑戰性的任務。但是，對於構建可維護且可擴充套件的應用程式至關重要。透過共享程式碼，我們可以避免程式碼重複，減少開發時間，並在我們的應用程式中保持一致性。
在本教程中，我們將探討在 Node.js 和瀏覽器之間共享程式碼的不同技術，並學習如何為我們的專案選擇最佳方法。
在 Node.js 和瀏覽器之間共享程式碼的技術
使用者可以按照以下方法在 node.js 和瀏覽器之間共享程式碼：
CommonJS 模組
CommonJS 模組是在 Node.js 中組織和共享程式碼的一種廣泛使用且簡單的方法。許多 Node.js 包都是使用 CommonJS 模組構建的，因為它們易於使用。
但是，它們預設情況下不適用於瀏覽器。要在瀏覽器中使用 CommonJS 模組，我們必須使用 Browserify 或 Webpack 等工具。這些工具可以建立一個在 Node.js 和瀏覽器中都能使用的單個 JavaScript 檔案。根據目標環境，它們還可以將我們的程式碼從 CommonJS 轉換為 ES 模組，反之亦然。
如果我們正在構建一個 Node.js 應用程式，並且希望在瀏覽器中重用一些伺服器端程式碼，則 CommonJS 模組是一個不錯的選擇。
ES 模組
ES 模組是在 Web 瀏覽器和 Node.js 中組織和共享程式碼的一種現代且原生方法。它們易於使用，並且許多現代前端框架（如 React 和 Vue.js）都開箱即用地支援 ES 模組。
我們可以使用 npm 或 Yarn 等包管理器在 Node.js 和瀏覽器之間共享程式碼。我們可以將我們的程式碼釋出為一個包，並使用包管理器在兩個環境中安裝它。
如果我們希望使用一種現代且標準化的方式來組織和共享應用程式的後端和前端之間的程式碼，則 ES 模組是一個不錯的選擇。
通用 JavaScript
通用 JavaScript，也稱為同構 JavaScript，允許我們編寫可在伺服器和客戶端上執行的程式碼。這有助於提高效能，減少頁面載入時間並增強 SEO。
通用 JavaScript 需要大量的預配置，並且設定起來可能很複雜。此外，某些庫和 API 在伺服器和客戶端上的工作方式可能不同，從而導致意外錯誤。
如果我們需要構建一個具有高效能和可擴充套件性的應用程式，並具有伺服器端渲染，並且希望在後端和前端之間共享盡可能多的程式碼，這是一個不錯的選擇。
通過了解這三種方法，使用者可以選擇最適合其專案需求和開發偏好的方法。
使用 Webpack 將 Node.js 程式碼與瀏覽器共享
像 Webpack 這樣的構建工具是共享 Node.js 和瀏覽器之間程式碼的強大方法。使用者可以按照以下步驟使用 Webpack 在 node.js 和瀏覽器之間共享程式碼：
步驟 1 - 首先，我們需要在我們的機器上安裝 Webpack。
npm install --save-dev webpack webpack-cli
步驟 2 - 接下來，我們需要建立一個 Webpack 配置檔案，該檔案指定如何捆綁我們的程式碼。這是一個簡單示例，說明該檔案可能是什麼樣子
module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: __dirname + '/dist' } };
步驟 3 - 之後，我們可以像往常一樣編寫我們的 Node.js 或瀏覽器程式碼。
步驟 4 - 現在，我們需要使用以下命令捆綁我們的程式碼：
npx webpack --mode=development
步驟 5 - 最後，我們可以透過將其包含在我們的 HTML 檔案中或在我們的 Node.js 程式碼中需要它來在我們的 Node.js 或瀏覽器應用程式中使用該捆綁包。
例如，如果我們使用步驟 2 中的預設配置，我們可以像這樣在我們的 HTML 檔案中包含該捆綁包：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> My App </title>
</head>
<body>
<script src = "dist/bundle.js"> </script>
</body>
</html>
示例
此示例演示瞭如何使用通用 JavaScript 方法為 Node.js 和瀏覽器定義和匯出函式。在 myLibrary.js 檔案中，我們定義了兩個函式 greet() 和 goodbye()，它們可以在 Node.js 和瀏覽器環境中使用。程式碼檢查模組是否存在併為 Node.js 匯出函式，同時為瀏覽器將其匯出到 window 物件。
在 index.js 檔案中，我們使用 require() 函式匯入 myLibrary.js 模組，然後使用引數呼叫匯出的函式 goodbye()。
在 index.html 檔案中，我們將 myLibrary.js 檔案包含為指令碼標籤，然後使用指令碼標籤使用引數呼叫匯出的函式 greet()。
這樣，我們可以建立一個通用且可重用的程式碼庫，該程式碼庫可以在 Node.js 和瀏覽器環境中使用，並且程式碼將在每個環境中正確工作。
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 + '!');
}
};
}
index.js
const myLibrary = require('./myLibrary');
myLibrary.goodbye('Subham');
index.html
<html lang="en">
<head>
<title> NodeJs & Browser </title>
</head>
<body>
<script src = "myLibrary.js" > </script>
<script>
myLibrary.greet('Subham');
</script>
</body>
</html>
輸出
在本教程中，使用者學習了在 Node.js 和瀏覽器之間共享程式碼的不同技術，包括 CommonJS 模組、ES 模組和通用 JavaScript。每種方法都有其優缺點，選擇將取決於專案需求和開發偏好。
透過遵循本教程中提到的步驟，使用者可以建立一個 Webpack 配置檔案，該檔案指定如何捆綁其程式碼，從而允許他們像往常一樣編寫 Node.js 或瀏覽器程式碼。我們還看到了如何使用通用 JavaScript 方法為 Node.js 和瀏覽器定義匯出函式的示例。
1K+ 次瀏覽
