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

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

在本教程中，我们将探讨在Node.js和浏览器之间共享代码的不同技术，并学习如何为我们的项目选择最佳方法。

在Node.js和浏览器之间共享代码的技术

用户可以按照以下方法在node.js和浏览器之间共享代码−

CommonJS模块

CommonJS模块是在Node.js中组织和共享代码的一种广泛使用的简单方法。许多Node.js包都是使用CommonJS模块构建的，因为它们很容易使用。

然而，它们默认不在浏览器中工作。要在浏览器中使用CommonJS模块，我们必须使用Browserify或Webpack这样的工具。这些工具可以创建一个单一的JavaScript文件，在Node.js和浏览器中工作。根据目标环境的不同，它们也可以将我们的代码从CommonJS转换为ES模块，或者反之亦然。

如果我们正在构建一个Node.js应用程序，并希望在浏览器中重用一些服务器端的代码，CommonJS模块是一个不错的选择。

ES模块

ES模块是一种现代和原生的方式，可以在网络浏览器和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导出函数，同时为浏览器导出到窗口对象中。

在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>