在前端开发中，我们常常需要使用到打包工具来管理和合并多个 JavaScript 文件。其中，browserify 是一个流行的 npm 包，可以将 CommonJS 模块化风格的 JavaScript 文件打包成浏览器可以直接运行的单个文件。而 browserify-server 就是基于 browserify 的一款简单易用的服务器，可以为我们提供快速的本地静态文件服务和实时编译功能。
安装
首先，我们需要在全局安装 browserify 和 browserify-server：
npm install -g browserify browserify-server
这样，我们就可以在命令行中使用 browserify 和 browserify-server 命令了。
使用
创建项目
首先，我们需要创建一个新的项目，并在项目目录中新建一个 index.js 文件。在该文件中，我们可以写下以下示例代码：
var $ = require('jquery');
$('body').append('<h1>Hello, world!</h1>');这里，我们引入了 jQuery 库，并在页面中添加了一个标题元素。
打包文件
接下来，我们需要使用 browserify 命令将 index.js 文件打包成浏览器可识别的单个文件：
browserify index.js > bundle.js
这条命令将会生成一个 bundle.js 文件，其中包含了 index.js 中所引入的所有依赖库。
启动服务器
最后，我们可以使用 browserify-server 命令启动一个本地静态文件服务器，并将 index.html 文件设置为默认展示页面：
browserify-server --entry index.html
这条命令会在本地启动一个端口为 9966 的服务器，并自动打开默认浏览器展示 index.html 页面。此时，我们就可以看到页面中已经成功添加了一个标题元素。
实时编译
如果我们希望在修改 JavaScript 文件后，自动重新生成打包文件并刷新页面，可以使用 --watch 参数来启用实时编译功能：
browserify-server --entry index.html --watch
这样，在修改 index.js 文件后，服务器会自动重新编译打包文件，并刷新页面展示最新的结果。
总结
通过上述步骤，我们可以快速地搭建一个基于 browserify 和 browserify-server 的前端项目，并且可以方便地管理和合并多个 JavaScript 文件。同时，实时编译功能也可以极大地提升我们的开发效率。希望本文能够对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41847