Browserify

Posted 2020-06-17

  NodeJS 把 javascript 的使用从浏览器端扩展到了服务器端，使得前端开发人员可以用熟悉的语言编写服务器端代码。这一变化使得 NodeJS 很快就流行起来。在 NodeJS 社区中有非常多的高质量模块可以直接使用。根据最新的统计结果，NodeJS 的 npm 中的模块数量已经超过了 Java 的 Maven Central 和 Ruby 的 RubyGems，成为模块数量最多的社区。不过这些 NodeJS 模块并不能直接在浏览器端应用中使用，原因在于引用这些模块时需要使用 NodeJS 中的 require 方法，而该方法在浏览器端并不存在。Browserify 作为 NodeJS 模块与浏览器端应用之间的桥梁，让应用可以直接使用 NodeJS 中的模块，并可以把应用所依赖的模块打包成单个 JavaScript 文件。通过 Browserify 还可以在应用开发中使用与 NodeJS 相同的方式来进行模块化和管理模块依赖。如果应用的后台是基于 NodeJS 的，那么 Browserify 使得应用的前后端可以使用一致的模块管理方式。即便应用的后端不使用 NodeJS，Browserify 也可以帮助进行前端代码的复用和组织。

Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。

安装：

npm install -g browserify

示例

这是 main.js 的内容，像普通的 nodejs 程序那样使用 require() 加载库和文件：

var foo = require(‘./foo.js‘);
var bar = require(‘../lib/bar.js‘);
var gamma = require(‘gamma‘);

var elem = document.getElementById(‘result‘);
var x = foo(100) + bar(‘baz‘);
elem.textContent = gamma(x);

导出的方法：

module.exports = function (n) { return n * 111 }

使用 browserify 编译：

$ browserify main.js > bundle.js

现在 main.js 需要的所有其它文件都会被编译进 bundle.js 中，包括很多层 require() 的情况也会一起被递归式的编译过来。

编译好的 js 可以直接拿到浏览器使用

 

<script src="bundle.js"></script>

browserify运行原理分析

http://blog.jobbole.com/78825/