如何在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在服务器和客户机上的工作方式可能不同，导致意外的错误。

如果我们需要构建一个高性能和可扩展的应用程序，具有服务器端渲染，并且希望在后端和前端之间共享尽可能多的代码，通用JavaScript是一个不错的选择。

通过理解这三种方法，用户可以选择最适合其项目需求和开发偏好的方法。

使用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或浏览器应用程序中使用该捆绑包。

例如，如果我们正在使用第二步中的默认配置，我们可以这样在我们的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文件作为script标签包含，并使用script标签调用导出的函数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>