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

node.jsjavascriptweb developmentfront end technology

在完整堆栈应用程序的后端和前端之间共享代码可能是一项艰巨的任务。但是，这对于构建可维护和可扩展的应用程序至关重要。通过共享代码，我们可以避免代码重复，减少开发时间，并保持应用程序之间的一致性。

在本教程中，我们将探索在 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 = {
      
      // 为 Node.js 导出函数或对象
      greet: function(name) {
         console.log('Hello, ' + name + '!');
      },
      goodbye: function(name) {
         console.log('Goodbye, ' + name + '!');
      }
   };
} else {
   
   // 浏览器代码
   window.myLibrary = {
      
      // 为浏览器导出函数或对象
      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>