如何将browserify集成到Node.js中

Browserify 是Node.js的一种工具，允许开发人员以模块化的方式编写代码，然后将其打包在一起以在Web浏览器中使用。它允许我们在浏览器中使用require()，就像在Node.js中使用它一样。通过使用Browserify，您可以编写使用CommonJS模块的代码，然后在浏览器中使用该代码而无需进行任何额外的更改。这样可以更好地组织和重用代码，并消除了为浏览器进行单独构建的需要。此外，Browserify还允许您在浏览器中使用npm软件包，从而可以轻松在Web项目中使用热门库和模块。在本文中，我们将看到如何将Browserify集成到Node.js中。

安装Browserify并为项目进行设置的步骤：

步骤1：创建一个新的项目文件夹：

mkdir Project

步骤2：将目录更改为创建的项目文件夹并初始化npm init：

要在您的项目中使用Browserify，您需要创建一个package.json文件。该文件包含有关您的项目的信息，包括其依赖关系。您可以通过在项目的根目录中运行以下命令来创建一个package.json文件：

npm init

步骤3：使用npm安装。

要使用Browserify，首先需要安装它。在终端上运行以下命令：

npm install browserify -g

通过这样做，Browserify 将会在你的系统中全局安装，从而使你能够在任何项目中使用它。

如何将browserify集成到Node.js中

项目结构： 下面给出的示例遵循的基本项目结构应该如下所示：

如何将browserify集成到Node.js中

示例1： 现在我们可以使用Browserify了。让我们创建一个快速的程序来添加两个整数，以查看它是否工作。在这个项目中使用了’mathjs’模块来添加两个数字。为了使用mathjs，我们需要安装它。因此，要安装它，请按照以下步骤进行：

使用npm安装mathjs模块，请执行以下命令：

npm install mathjs

如何将browserify集成到Node.js中

方法：

第一行 var math = require(‘mathjs’); 是引入了 ‘mathjs’ 模块。
第二行 console.log(“The sum of 1 and 2 is “+math.add(1, 2)); 是将数据传递给 ‘add’ 函数，并将两个数字的和记录在日志中。
然后，在控制台中显示两个数字的求和结果。
代码的 HTML 结构应写在 index.html 中。
JavaScript 代码应写在 main.js 中

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <!-- Adding the script into the html -->
    <script src="bundle.js"></script> 
</head> 
  
<body> 
    <h1>GeekForGeeks</h1> 
    <h3>Mathjs Module</h3> 
</body> 
  
</html>

main.js

// Including module 
var math = require('mathjs'); 
  
// Print response in the console 
console.log("The sum of 1 and 2 is " + math.add(1, 2));

运行步骤：

在终端上执行以下命令。命令中当前文件名为“main.js”，转换后创建的文件名为“bundle.js”。

browserify main.js -o bundle.js

然后，一个名为’bundle.js’的文件被创建。
我们现在可以使用live server访问HTML文件（我们使用HTML文件来简单地在屏幕上显示输出），或者直接打开index.html文件，如下所示。

输出：

如何将browserify集成到Node.js中

示例2： 在这个示例中，我们使用“moment”模块在控制台上显示当前日期和时间。为了使用moment模块，我们需要安装它。所以按照以下步骤安装它：

使用npm安装moment模块，执行以下命令:

npm install moment

如何将browserify集成到Node.js中

步骤：

使用“const moment = require(‘moment’);”引入moment包。
创建一个名为’currentTimeAndDate’的变量，并将从“moment().format(‘MMMM Do YYYY, h:mm:ss a’);”中得到的结果存储在该变量中。
在最后一步中，将结果记录在控制台并显示输出。

index.html

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <!-- Adding the script into the html -->
    <script src="bundle.js"></script> 
</head> 
  
<body> 
    <h1>GeekForGeeks</h1> 
    <h3>Moment Module</h3> 
</body> 
  
</html>

main.js

// Require the moment module 
const moment = require('moment'); 
  
// Saving the result in currentTimeandDate 
const currentTimeAndDate = moment() 
    .format('MMMM Do YYYY, h:mm:ss a'); 
  
// Printing the result 
console.log(`Hello, it's ${currentTimeAndDate}`);

运行步骤：