当我们在前端使用 JavaScript 开发时，经常会引入各种第三方库和工具。而这些库和工具常常需要通过打包工具进行构建，才能在前端中使用。其中一种常用的打包工具是 browserify-brunch。本文将详细介绍如何使用它。
什么是 browserify-brunch
browserify-brunch 是一款基于 browserify 的中介插件。它使用 Brunch 构建工具，实现了将通用的 JavaScript 模块转换为浏览器端可用的代码。
Brunch 是一款快速、简化的前端构建工具，它支撑多重编译器，并以提高开发效率和应用性能为目标。
安装
全局安装 brunch：
npm install -g brunch
创建项目并安装必要的依赖项：
brunch new myapp && cd myapp npm install --save jquery npm install --save-dev babel-brunch browserify-brunch
此时，我们安装了 jquery 依赖和 babel-brunch、browserify-brunch 两个打包工具。其中， babel-brunch 是必须包含的，因为它提供了转换 ES6 代码的相关功能。
配置
在项目根目录下，创建一个名为 brunch-config.js 的配置文件：
-- -------------------- ---- -------
-------------- - -
------ -
------------ -
------- -----------
-
--
---- -
-------- -
-- --------
-
--
-------- -
----------- -
---------- ------------- - -------- ---------- ---
-
-
--我们使用 files.javascripts.joinTo 选项拉取 app.js 的所有文件并打包为唯一的文件。同时，我们存储了 jquery 依赖，并将其设置为全局变量使用。最后，我们使用 browserify-brunch 的插件，使用 babelify 进行代码转换。
结果
我们在项目文件夹中新建 index.html 文件，其中引入我们打包后的 app.js 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------------
-------
------
------- -------------------------
-------
-------接着我们运行 brunch 命令即可打包我们的代码：
$ brunch build
现在，我们只需要在浏览器中打开 index.html 便可以正常访问项目。
示例如下
src/app.js
import $ from 'jquery';
$(document).ready(function() {
$('body').append('<p>jQuery Works!</p>');
});js/app.js
-- -------------------- ---- -------
---- --------
----------- -
--- - - ------------------
---------------------------- -
--------------------------- -------------
---
-----在上述代码中，我们成功使用 browserify-brunch 打包了我们的代码。我们不再使用 ES6 的 import 语法，而是使用 require 导入了 jquery 依赖。最终，我们是可以在浏览器上看到页面上生成 "jQuery Works!" 文字的。
指导意义
在前端开发中，引入各种第三方模块或组件几乎已经成为标配。而 browserify-brunch 可以帮助我们快速完成模块化开发，提高代码复用率，降低维护成本。
同时，它可以让我们在开发过程中使用最新的 JavaScript 特性，提高代码的可读性和可维护性。并且，通过 Brunch 的构建工具，我们可以借助 source maps 功能追踪和调试问题，大大提高了开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/74607