在前端开发中，我们通常需要使用 JavaScript 模块化工具来管理代码的依赖关系和组织结构。其中，Browserify 是一款流行的工具，它可以将 CommonJS 模块打包成浏览器可用的 JavaScript 文件。而 gulp-browserify 则是一个基于 Gulp 的插件，它可以方便地将 Browserify 集成到 Gulp 构建流程中。
安装
首先，我们需要安装 gulp 和 gulp-browserify。
npm install --save-dev gulp gulp-browserify
基本配置
在 gulpfile.js 中，我们可以通过以下方式配置 gulp-browserify：
const gulp = require('gulp');
const browserify = require('gulp-browserify');
gulp.task('scripts', function() {
return gulp.src('src/js/main.js')
.pipe(browserify())
.pipe(gulp.dest('dist/js'));
});以上代码定义了一个名为 scripts 的任务，它将 src/js/main.js 文件用 Browserify 打包，并将结果输出到 dist/js 目录中。
高级配置
除了基本配置外，gulp-browserify 还提供了许多选项和方法，可以满足我们更复杂的需求。
自定义 Browserify 实例
如果我们想要自定义 Browserify 的实例，可以将一个实例作为参数传递给 browserify() 方法。
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------- - ----------------------
----- ------ - -------------------------------
-------------------- ---------- -
----- - - ------------
-------- -----------------
------ ----
---
------ ----------
--------------------------
----------------------------
---以上代码定义了一个名为 scripts 的任务，它使用自定义的 Browserify 实例将 src/js/main.js 文件打包成 dist/js/bundle.js。注意，我们需要使用 vinyl-source-stream 来将 Node Stream 转换成 Gulp 可用的 Vinyl File Object。
Sourcemaps
如果我们想要生成 sourcemaps 以便于调试，可以在调用 browserify() 方法时传递 debug: true 选项，并使用 gulp-sourcemaps 插件进行处理。
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------- - ---------------------------
----- ---------- - ---------------------------
-------------------- ---------- -
------ --------------------------
------------------------
------------------
------ ----
---
----------------------------
----------------------------
---以上代码定义了一个名为 scripts 的任务，它将 src/js/main.js 文件打包，并生成 sourcemaps 到 dist/js 目录中。
示例代码
以下是一个简单的示例，展示了如何使用 gulp-browserify 将多个 JavaScript 模块打包成一个文件。
-- -------------------- ---- -------
-- -----------------
-------------- - -
--------- -------------- -
------------------- - - ---- - -----
-
--
-- -----------------
-------------- - -
------- -------------- -
----------------- - - ---- - -----
-
--
-- --------------
----- ------- - ---------------------
----- ------- - ---------------------
--------------------------
------------------------ -------------------- ---- -------
-- -----------
----- ---- - ----------------
----- ---------- - ---------------------------
-------------------- ---------- -
------ --------------------------
-------------------
----------------------------
---运行 gulp scripts 后，将会生成以下代码到 dist/js/main.js 文件中。
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/41386) ，转载请注明来源
[https://www.javascriptcn.com/post/41386](https://www.javascriptcn.com/post/41386)