如何在 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 步 – 最后，我們可以在 Node.js 或瀏覽器應用程序中使用該捆綁包，方法是將其包含在 HTML 文件中或在 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>

登錄后復制