带有 requirejs 的引导库

Question

我正在尝试将引导程序与 require js 一起使用。到目前为止，jquery、underscore 和 boostrap 加载正常，但我遇到了一个库未加载的问题：bootstrap-tagsinput。如何调试 requirejs 并查看该库是否正在加载？

这是我的 common.js

    requirejs.config({
        shim: {
            'jquery': {
              exports: '$'
            },
            'underscore': {
                exports: '_'
            },
            'bootstrap': {
                deps: [ "jquery" ]
            },
            'bootstrap-tagsinput': {
                deps: [ "bootstrap" ]
            }
        },
        baseUrl: "/",
        paths: {
            'jquery': [
                '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min',
                'jquery/jquery.min'
            ],
            'underscore': [
                '//underscorejs.org/underscore-min',
                'underscore/underscore-min'
            ],
            'bootstrap': [
                '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min',
                'bootstrap/dist/js/bootstrap.min'
            ],
            'bootstrap-tagsinput': 'bootstrap-tagsinput/dist/bootstrap-tagsinput.min'
        }
    });

Answer 1

Require.js 是为了处理模块之间的依赖关系而发明的，因此很明显，您可以在使用它的模块中指定这些依赖关系，就像您在自己的答案中所说的那样。作为define() 的第二个参数给出的函数按照给定的顺序获取这些模块的句柄。

由于$ 通常用于 jQuery 库，所以将$ 用于其他东西不是一个好主意，因为这会造成很多混乱。但通常你在一个模块中也需要 jQuery，所以你的 define() 调用很可能看起来像

define['jquery', 'bootstrap-tagsinput'], function($) {
  ...
});

在这种情况下，$ 绑定到 jQuery，而不是 bootstrap-tagsinput。它是通过 jQuery 机制调用的，因此您不需要在函数中添加第二个参数。

Answer 2

我发现需要在使用它的地方定义“bootstrap-tagsinput”。例如，在使用此库的页面中：

define(['bootstrap-tagsinput'], function() {
    // js for the page here
});

为了自动加载应该始终可用的模块（例如 bootstrap 或 jquery），我们也可以这样做。

define(['bootstrap'], function() {
    // main.js contents
});