在前端开发中，使用 RequireJS 可以帮助我们更好地管理 JavaScript 模块，并使我们的代码更具可读性和可维护性。但是，在大型多页面项目中使用 RequireJS 可能会面临一些挑战，例如如何处理不同页面之间的依赖关系和如何打包文件以实现更快的加载速度。本文将介绍如何使用 RequireJS 的构建配置和 r.js 工具来解决这些问题。
构建配置
RequireJS 允许我们为每个页面单独配置一个构建文件。构建文件是一个 JSON 对象，它定义了该页面所需要的模块以及如何优化和打包这些模块。以下是一个示例构建文件：
{
"baseUrl": ".",
"name": "app",
"out": "app-built.js",
"paths": {
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min"
}
}baseUrl：指定相对于 HTML 文件的根目录。name：入口模块的名称。out：生成的合并后的文件名。paths：模块路径的映射表。
在上面的示例中，我们将 jQuery 从本地文件替换为从 Google CDN 加载的远程文件。这可以加快页面加载速度，因为大多数用户可能已经从同一个 CDN 加载过 jQuery。
r.js
r.js 是 RequireJS 的一个工具，用于将模块打包到单个文件中以减少 HTTP 请求次数，并通过优化和压缩来减小文件大小。以下是一些常用的命令：
# 打包某个页面的代码 r.js -o build/page1.build.js # 打包所有页面的代码 r.js -o build/build.js
在这两个示例中，我们可以看到 -o 参数指定了使用哪个构建配置文件。第一个命令将只打包页面 1 的代码，而第二个命令将打包整个项目的代码。
示例代码
以下是一个基本的多页应用程序的目录结构：
-- -------------------- ---- -------
--- ----------
--- ----------
--- ----------
--- --
- --- ------
- --- ---------
- --- ---
- - --- -------------
- --- -------
- - --- ----------
- - --- ----------
- - --- ----------
- --- ----------
--- -----
--- --------------
--- --------------
--- --------其中，index.html、page1.html 和 page2.html 分别为三个不同的页面，它们共享 common.js 和 lib/jquery.min.js 文件，但是各自有不同的入口模块和页面特定的模块。
以下是 page1.build.js 的内容：
-- -------------------- ---- -------
-
---------- --------
------- --------
------ --------------------------
-------- -
--------- ---------------------------------------------------------
--
---------- -----------------
-在这个构建文件中，我们指定了入口模块 page1，并将生成的文件保存在 ../build/page1-built.js 中。同时，我们也包含了 ../require.js 文件，以确保在打包时该文件也被包含在内。
最后，我们可以使用以下命令来打包 page1.html 的代码：
r.js -o build/page1.build.js
至此，我们已经介绍了如何使用 RequireJS 的构建配置和 r.js 工具在多页应用程序中管理 JavaScript
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27755