简介
前端开发中，使用模块化开发的好处是显而易见的：保持代码结构清晰，减少全局变量等，提高代码可维护性。而 RequireJS 是一个流行的 AMD 模块加载器，可以帮助我们轻松地管理依赖关系和加载模块。
然而，当你需要加载一些非 AMD 的库时，例如 jQuery、Underscore 和 Backbone，就需要使用 RequireJS 的 shim 配置。本文将介绍如何使用 RequireJS 2.0.1 和 shim 来加载这些常用的库。
准备工作
在开始之前，需要先安装 RequireJS 并创建一个示例项目。可以通过以下命令安装：
npm install requirejs
接下来，在项目根目录下创建一个 index.html 文件和一个 main.js 文件。在 index.html 文件中添加以下内容：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------- --------------- ------- ------ ---------- --------------- -------- ---------------- -------------------------- ------- -------
这里使用了 RequireJS 自带的脚本标签来加载 main.js 文件，并将它设为入口模块（entry point module）。
在 main.js 文件中，我们需要配置 RequireJS。首先定义一个 baseUrl 变量，用于指定模块文件的基本路径：
var baseUrl = 'js';
接下来，可以开始配置 RequireJS。首先引入 require.config 方法：
require.config({
});然后设置一些常用的配置项，例如 baseUrl、paths 和 shim：
-- -------------------- ---- ------- ---------------- --- ----------- --------- -------- --- ----------- ------- - --------- --------------------------------------------- ------------- -------------------------------------------------------- ----------- -------------------------------------------------- --- --- --- --- ------- ------ - --------- - ----------- --- ---- ------------- - ----------- --- ---- ----------- - -------- ---------- -------------- ----------- ---------- --- -- ---
这里定义了三个非 AMD 模块：jQuery、Underscore 和 Backbone。在 paths 中，我们为它们定义了别名和 CDN 地址。而在 shim 中，我们配置了它们之间的依赖关系和导出变量。
加载 jQuery
首先让我们来看看如何加载 jQuery。在 main.js 文件中添加以下代码：
require(['jquery'], function($) {
console.log($);
});这里使用了 require 方法来加载 jQuery 模块。当模块加载完成后，它会执行回调函数，并将 jQuery 作为参数传入。我们可以通过 $ 变量来引用它。
加载 Underscore
接下来让我们来加载 Underscore。在 main.js 文件中添加以下代码：
require(['underscore'], function(_) {
console.log(_);
});这里同样是使用 require 方法来加载 Underscore 模块。当模块加载完成后，它会执行回调函数，并将 Underscore 作为参数传入。我们可以通过 _ 变量来引用它。
加载 Backbone
最后让我们来加载 Backbone。在 main.js 文件中添加以下代码：
require(['backbone'], function(Backbone) {
console.log(Backbone);
});这里同样是使用 require 方法来加载 Backbone 模块。不过，在 `
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28649