Nodejs Browserify 跑在浏览器上的Node程序

Nodejs Browserify 跑在浏览器上的Node程序

alt Browserify 跑在浏览器上的Node程序

前言：

Nodejs的出现，为Javascript开辟了一条新的大路，让Javascript获得了新生。虽然Nodejs也基于Javascript语法和解释器，但是前后端各自有各自的库，无法重用真的很不舒服。

Browserify 通过预编译的方法，让Javascript前端可以直接使用Node后端的程序。我们可以用一套代码完成前后端，不仅工作量变少了，程序重用性增强，还可以直接在浏览器中使用大量的NPM第三方开源库的功能。

Web时代，将是我们创新与创造的新起点。

文章目录：

  • Browserify介绍
  • Browserify安装
  • Browserify命令行参数
  • 在浏览器中运行Nodejs程序
  • 在浏览器中模块化调用Nodejs程序

请查看博客文章

http://blog.fens.me/nodejs-browserify/


3 回复

Nodejs Browserify 跑在浏览器上的Node程序

前言：

Nodejs的出现，为JavaScript开辟了一条新的大路，让JavaScript获得了新生。虽然Nodejs也基于JavaScript语法和解释器，但是前后端各自有各自的库，无法重用真的很不舒服。

Browserify 通过预编译的方法，让JavaScript前端可以直接使用Node后端的程序。我们可以用一套代码完成前后端，不仅工作量变少了，程序重用性增强，还可以直接在浏览器中使用大量的NPM第三方开源库的功能。

Web时代，将是我们创新与创造的新起点。

文章目录：

  • Browserify介绍
  • Browserify安装
  • Browserify命令行参数
  • 在浏览器中运行Nodejs程序
  • 在浏览器中模块化调用Nodejs程序

Browserify介绍

Browserify 是一个工具，它可以将Node.js模块转换为浏览器可以理解的格式。它允许你在浏览器中使用Node.js的 require 方法来引入模块，就像在服务器端一样。

Browserify安装

你可以通过npm来安装Browserify：

npm install -g browserify

Browserify命令行参数

Browserify的基本命令行参数如下：

browserify input.js -o bundle.js

这会将 input.js 文件打包成 bundle.js，浏览器可以直接加载 bundle.js 文件。

在浏览器中运行Nodejs程序

假设我们有一个简单的Node.js文件 main.js，内容如下：

// main.js
const fs = require('fs');

fs.readFile('./data.txt', 'utf8', function(err, data) {
    if (err) throw err;
    console.log(data);
});

首先，我们需要安装 fs 模块依赖（尽管浏览器不支持 fs，但我们会使用Browserify来处理这些依赖）：

npm install --save fs

然后，使用Browserify打包：

browserify main.js -o bundle.js

在HTML文件中引入 bundle.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Browserify Example</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

在浏览器中模块化调用Nodejs程序

如果你想要在浏览器中模块化调用Nodejs程序，可以创建多个模块，并使用 require 来引入它们。

例如，我们有两个文件 moduleA.js 和 moduleB.js：

moduleA.js

// moduleA.js
module.exports = {
    sayHello: function() {
        return "Hello from Module A";
    }
};

moduleB.js

// moduleB.js
const moduleA = require('./moduleA.js');

module.exports = {
    greet: function() {
        return moduleA.sayHello();
    }
};

main.js

// main.js
const moduleB = require('./moduleB.js');

console.log(moduleB.greet());

然后打包并引入到HTML中：

browserify main.js -o bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Browserify Example</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

这样，你就可以在浏览器中运行复杂的Node.js程序了。


其实我想知道意义在哪里…

Nodejs Browserify 跑在浏览器上的Node程序

前言：

Node.js 的出现为 JavaScript 开启了新的篇章，使得 JavaScript 不仅局限于浏览器端，还能在服务器端运行。尽管 Node.js 和浏览器中的 JavaScript 都基于相同的语言和解释器，但由于前后端环境不同，导致一些库无法在两个环境中通用。这种情况下，Browserify 就显得尤为重要。

Browserify 可以将 Node.js 中使用的 CommonJS 模块系统转换成可以在浏览器中运行的格式，从而允许我们在浏览器中直接使用 Node.js 的库，如 fs、path 等。这不仅减少了重复造轮子的工作量，还提高了代码的可复用性和维护性。

文章目录：

  1. Browserify 介绍

    • Browserify 是一个工具，它能将 Node.js 的模块打包成可以在浏览器中运行的 JavaScript 文件。它能够解析和处理 Node.js 的模块依赖关系，并将它们转换成适合浏览器环境的格式。

  2. Browserify 安装

    • 安装 Browserify 非常简单，只需执行以下命令即可：
      npm install -g browserify

  3. Browserify 命令行参数

    • 使用 Browserify 最常见的方法是通过命令行进行。例如：
      browserify entry.js -o bundle.js
      这里 entry.js 是你的入口文件，-o bundle.js 表示将打包后的结果输出到 bundle.js 文件中。

  4. 在浏览器中运行 Node.js 程序

    • 假设我们有一个简单的 Node.js 程序，定义了一个模块并导出了一个函数：
      // myModule.js
module.exports = function() {
  console.log('Hello from Browserify!');
};
    • 我们需要将这个模块打包并引入到 HTML 页面中：
      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Browserify Example</title>
</head>
<body>
  <script src="bundle.js"></script>
  <script>
    require('./myModule')();
  </script>
</body>
</html>
    • 通过上述步骤，你就可以在浏览器中运行 Node.js 的代码了。

  5. 在浏览器中模块化调用 Node.js 程序

    • 如果你有更多的模块，可以通过模块导入的方式来组织代码。例如：
      // main.js
var myModule = require('./myModule');
myModule();

// 另外的模块
var otherModule = require('./otherModule');
otherModule();
    • 你只需要将 main.js 作为入口文件打包：
      browserify main.js -o bundle.js

总结：

通过 Browserify，我们可以利用 Node.js 的强大功能和丰富的库来编写更复杂的前端应用，同时减少前后端代码的差异，提高开发效率。希望以上内容对你有所帮助！

回到顶部