将 UnderscoreJS 与 RequireJS 一起使用

Question

我正在尝试 use/load UnderscoreJS 1.7.0 与 RequireJS 2.1.14-3。在我的应用程序启动时，UnderscoreJS 加载良好，但它是 "undefined"。请参阅以下详细信息：

main.js

define(function() {
    // Configuration of RequireJS
    requirejs.config({
        enforceDefine : true,

        map : {
            '*': { 
                ...
                'underscore' : 'webjars/underscorejs/1.7.0/underscore'
            },
        },

        // The base URL is just the top-level directory where the files are stored
        baseUrl : './',

        // Kick-start the application by loading these files
        deps : [ 'MyPanel' ],
    });
});

使用它的模块：

define(['ractive',
    'underscore',
    ...], 
    function(Ractive,
            _,
            ...){
var Foo = Ractive.extend({
    ...

    oninit: function(){
        var anArray = [1, 2, 3]
        _.each(anArray, function(item){
               ...
        })
    }
}

以及浏览器控制台中的结果：

浏览器加载underscoreJS文件：

这一定是一个细节，但我用 maven 和 webjars

管理了我的 Javascript 依赖项

那为什么我的 _ undefined ？

Answer 1

如果你查看 Underscore 1.7.0 的 source，你会发现它是这样注册的：

if (typeof define === 'function' && define.amd) {
    define('underscore', [], function() {
        return _;
    });
}

注意 define 的第一个参数。这会将模块的名称硬编码为 'underscore'.

问题是您使用的 map 配置与此硬编码名称不兼容。你所做的就是告诉 RequireJS "in all modules ("*"), when the module requires a module with the name 'underscore', then please return instead the module with the name 'webjars/underscorejs/1.7.0/underscore'"。所以当你需要 'underscore':

RequireJS 查找名为 'webjars/underscorejs/1.7.0/underscore' 的模块。
它使用此类模块名称的默认路径并在该位置查找文件。它加载文件并执行它。
但是，该文件包含一个 define 定义 'underscore' 的调用，而不是 'webjars/underscorejs/1.7.0/underscore'。所以 RequireJS 无法满足请求。

而不是 map，您应该为 Underscore 使用 paths 配置。类似于：

paths : {
    'underscore' : 'webjars/underscorejs/1.7.0/underscore'
}

这告诉 RequireJS 类似 "you'll find the module named 'underscore' at the location 'webjars/underscorejs/1.7.0/underscore'" 的东西。当您使用它时，请求的模块名称和定义的模块名称相匹配。

将 UnderscoreJS 与 RequireJS 一起使用

Using UnderscoreJS with RequireJS

maven

requirejs

underscore.js

webjars