前言
前端开发中，模块化与组件化是进行大型项目开发必不可少的技术手段，有了这些技术手段，我们能够更加高效灵活地进行代码编写和维护，尤其是在多人协作的项目中，这些技术手段的优势更加明显。
require.js 是实现模块化的一个可选方案，它是一款轻量级的 JavaScript 库，能够解决 JavaScript 应用的模块化开发问题，而 broccoli-requirejs 就是帮助我们在开发过程中快速打包 require.js 模块的一款 NPM 包。
本文将详细的介绍如何使用 broccoli-requirejs 进行前端项目的模块化开发。
安装
首先，我们需要安装 broccoli-requirejs，可以使用 npm 命令进行安装：
npm install --save-dev broccoli-requirejs
安装完成之后，我们需要在 brocfile.js 文件中配置 broccoli-requirejs 的执行参数：
-- -------------------- ---- ------- -- ----------- -- --- -------------- - ------------------------------ --- --------------- - --------------------- - ----------- ------------------- --------- ---- --- -------------- - ----------------
以上代码是一个 brocfile.js 的示例，其中：compileModules 是 broccoli-requirejs 的调用方法，它会将 app 目录下的模块打包成一个文件，具体的打包参数在第二个对象中配置。
配置参数
在 broccoli-requirejs 中，可以通过多种配置参数来满足前端项目的不同需求。下面列举了一些常用的配置参数：
configFile
configFile 参数是指定 require.js 配置文件的路径，文件格式应该是一个标准的 AMD 配置文件，如：
/* app/js/config.js */
require.config({
baseUrl: ".",
paths: {
jquery: "libs/jquery.min",
bootstrap: "libs/bootstrap.min"
}
});我们需要在配置文件中设定项目静态资源的路径和版本信息等参数，broccoli-requirejs 会在打包时读取该文件，并合并打包需要的模块列表。
shim
shim 参数是一段用于兼容非标准 AMD 模块的代码片段，如果项目中有非 AMD 标准的 JS 模块，则需要通过 shim 参数进行处理。
-- -------------------- ---- -------
-- ---------------- --
----------------
-------- ----
------ -
----------- -----------------
--
----- -
----------- -
----- -----------
-------- ----------------------
-
-
---在以上 config.js 配置中，我们需要通过 shim 参数将 app/libs/ajaxSubmit.js 模块标记为依赖了 jquery 模块，并且模块导出的函数名为 jQuery.fn.ajaxSubmit。
optimize
optimize 参数指定了打包模块的压缩选项：
- 如果为
false，则打包后的模块未被压缩。 - 如果为
true，则打包后的模块被压缩成一行（Code Context Model）。
示例
为了更好地理解 broccoli-requirejs 的使用方式，我们可以看一段完整的代码示例：
-- -------------------- ---- -------
-- ---------------- --
----------------
-------- ----
------ -
--------- -----------------------
------ ----------------------------
------------ --------------
--
----- -
------------ -
----- - -------- -
--
-------------------------------- -
-------- ------------
-
-
---
-- ------------- --
----------------- ------ ------------------ ----------- ----------- ------------- -
-----------------------------
------ ----- ------
-------- -------- -- -- ------
----
---在以上代码中，我们首先配置了 app/js/config.js 配置文件，该文件是一个标准 AMD 的配置文件，通过 require.config() 方法，我们指定了项目中的依赖模块和模块的路径等信息。
在 app.js 中，我们通过 define 方法定义了一个模块，它所依赖的模块分别是 jquery、hbs 和 templates/Home，其中 templates/Home 是一个已经预编译好的 Handlebars 模板，它将作为 app.js 中的 HTML 模板使用。
至此，我们已经使用 broccoli-requirejs 打包了该项目的所有前端静态资源，可以轻松地运行项目了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c88ccdc64669dde50c3