RequireJS 简单使用教程（下）

上一篇教程：RequireJS 简单使用教程（上） 主要写了 RequireJS 的 下载 & 引入、加载文件和模块、定义模块，考虑到内容可能会比较多，所以准备分开写。

配置

baseUrl

这个 baseUrl 就是 RequireJS 加载的根目录，默认和调用 requirejs.js 的 html 文件在同一目录。例如 html 文件的位置在：xxx.com/index.html ，baseUrl 的默认位置就是：xxx.com/。baseUrl 可以手动更改，更改后加载的时候就不需要写很长的路径了，下面还是一个超简单的目录：

D:.
│  test1.html
│
└─js
    │  main.js
    │  require.js
    │
    └─module
            isemail.js

下面配置 baseUrl 目录为：js ，然后加载：js/module/isemail.js ：

requirejs.config({
    baseUrl: 'js'
});

requirejs(['module/isemail'], function (isEmail) {
    //  调用 isEmail 模块并在控制台输出执行结果
    console.log(isEmail('[email protected]'));  //  判断邮箱地址的模块
});

手动配置的时候使用：config 方法，需要传入一个 JSON 对象，其中的：baseUrl: 'js' 就是配置：baseUrl 的位置，调用模块的时候不需要写 .js 后缀名。

paths

使用 paths 可以指定模块的路径，下面是一个超简单的目录：

D:.
│  test1.html
│
└─js
    │  main.js
    │  require.js
    │
    ├─lib
    │      jquery.js
    │
    └─module
            isemail.js

下面使用 paths 指定 jQuery 的路径：

requirejs.config({
    paths: {
        jquery: 'lib/jquery'
    }
});

requirejs(['jquery'], function ($) {
    //  按钮鼠标点击
    $('button').on('click', function () {
        alert('what\'s your problem');
    });
});

paths 也可以设置线上 CDN 的地址，如下：

requirejs.config({
    paths: {
        jquery: [
            'https://cdn.bootcss.com/jquery/3.4.1/jquery.min',
            'lib/jquery'
        ]
    }
});

requirejs(['jquery'], function ($) {
    //  按钮鼠标点击
    $('button').on('click', function () {
        alert('what\'s your problem');
    });
});

上面分别设置了一个线上的 jQuery CDN 地址和一个本地的 jQuery，如果 CDN 上的加载失败就会加载本地的 jQuery。

shim

在调用一些不支持 AMD 标准的模块的时候就需要配置 shim，还有一些涉及到依赖的非 AMD 模块，例如 Bootstrap 和 jQuery 的一些组件。

下面不配置 shim 调用 Bootstrap ：

requirejs.config({
    paths: {
        jquery: 'lib/jquery',
        bootstrap: 'lib/bootstrap.min'
    }
});

requirejs(['jquery', 'bootstrap'], function ($) {
    //  按钮鼠标点击
    $('#btn').on('click', function () {
        $('dialog').modal('show');
    });
});

下面是浏览器报错信息：

Bootstrap 需要依赖 jQuery，但是 Bootstrap 不是 AMD 标准的模块，不能在模块中直接配置依赖，所以在加载的时候顺序可能会出错。

下面使用 shim 配置依赖：

requirejs.config({
    paths: {
        jquery: 'lib/jquery',
        bootstrap: 'lib/bootstrap.min'
    },
    shim: {
        bootstrap: ['jquery']
    }
});

requirejs(['jquery', 'bootstrap'], function ($) {
    //  按钮鼠标点击
    $('#btn').on('click', function () {
        $('dialog').modal('show');
    });
});

上面的 Bootstrap 需要依赖 jQuery，使用 shim 配置后 加载的时候就会先加载 jQuery 然后加载 Bootstrap。

waitSeconds

配置加载超时，如果到达 waitSeconds 配置的时间还没有加载完成的话就会放弃加载，0 为无限期，默认为 7 秒。

urlArgs

可在 URL 后面增加额外的参数，就像：http://xxx.com?user=name 的参数，用法如下：

requirejs.config({
    paths: {
        jquery: 'https://code.jquery.com/jquery-3.4.1.min'
    },
    urlArgs: 'name=hello'
})

浏览器网络面板中的请求 URL 就是：https://code.jquery.com/jquery-3.4.1.min.js?name=hello 。