如何在 Node.js 和浏览器之间共享代码？-js教程-PHP中文网

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

王林

发布： 2023-09-14 22:45:03

转载

1637人浏览过

在全栈应用程序的后端和前端之间共享代码可能是一项具有挑战性的任务。然而，它对于构建可维护和可扩展的应用程序至关重要。通过共享代码，我们可以避免代码重复、减少开发时间并保持应用程序之间的一致性。

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

登录后复制