浅谈Browserify在模块化设计中的应用

87344892 2019-09-03

采用require进行模块化编程

在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护。在Node环境中,一个.js文件就称之为一个模块(module)
基于node.js开发的JavaScript程序中,一般会使用node环境中的第三方工具库和模块,并采用关键字require进行模块导入。

jspack = require("jspack").jspack,
    _ = require("underscore"),
    events = require("events"),
    util = require("util")

以上为对模块的加载。在node.js环境中,首先使用nmp工具进行安装:

nmp install jspack
nmp install underscore

再使用node命令行进行动态执行,不会出现问题。但是,若将该代码放在浏览器(IE/Chrome/firefox...)中运行时,就会出现require is not defined错误。原因在于浏览器并不支持require关键字,进而无法使用jspack/underscore模块。

在浏览器中运行node.js环境中的js程序

可以使用require.js工具库来实现模块的定义和加载。详见require.js

本文主要使用Browserify。不同于 require.js (AMD), browserify没有在浏览器上运行模块加载器,而是进行预编译模块的依赖,同时模块的写法和node.js一样通过require方法引入其他模块,符合CommonJs规范,所以像node.js模块一样组织和书写代码。几乎无需改动,只需进行预编译

步骤:

npm install --global browserify
browserify source.js -o target.js
<script src="target.js"></script>

得到的target.js包含了source.js本身以及依赖的模块,所以target.js文件大小是远大于source.js的。

总结

browserify优点:
完全简化了模块的开发流程,减少了开发成本,即不用引入额外的模块加载器,也不用过多地考虑模块之间依赖关系。模块定义和加载均与node.js一致,无需更改。

browserify缺点:
编译的文件体积会变得很大,需要包含所有模块。

相关推荐