首頁 > 文章 > web前端 > 如何在 Node.js 和瀏覽器之間共用程式碼？

如何在 Node.js 和瀏覽器之間共用程式碼？

王林轉載: 2023-09-14 22:45:031486瀏覽

在全端應用程式的後端和前端之間共享程式碼可能是一項具有挑戰性的任務。然而，它對於建立可維護和可擴展的應用程式至關重要。透過共享程式碼，我們可以避免程式碼重複、減少開發時間並保持應用程式之間的一致性。

在本教程中，我們將探索在 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>

輸出

如何在 Node.js 和浏览器之间共享代码？

在本教程中，使用者學習了在 Node.js 和瀏覽器之間共享程式碼的不同技術，包括 CommonJS 模組、ES 模組和通用 JavaScript。每種方法都有其優點和缺點，選擇取決於專案要求和開發偏好。

按照本教程中提到的步驟，使用者可以建立一個 Webpack 設定文件，指定如何捆綁其程式碼，從而允許他們像通常在 Node.js 或瀏覽器中一樣編寫程式碼。我們也看到如何使用通用 JavaScript 方法為 Node.js 和瀏覽器定義導出函數的範例。

以上是如何在 Node.js 和瀏覽器之間共用程式碼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript node.js vue.js html npm yarn webpack 前端框架 require 栈 JS 对象 SEO

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：使用 Next.js 和 JavaScript 進行伺服器端渲染 (SSR)下一篇：使用 Next.js 和 JavaScript 進行伺服器端渲染 (SSR)

看更多