javascript - RequireJS 加载 Wicket 库

Question

我正在使用图书馆 Wicket对于 map 的东西。如果我像往常一样将它作为脚本标记引用，它工作正常。工作链接如下。

https://arthur-e.github.io/Wicket/sandbox-gmaps3.html

当我们的项目使用 RequireJS 作为模块加载器时，问题就来了。

这是我试过的以下代码。

require.config({    
    waitSeconds: 200,
    paths: {
        'wicket': '/Vendor/Wicket/wicket',
        'wicketGmap3': '/Vendor/Wicket/wicket-gmap3'
    },
    shim: {
        wicket: {
            exports: 'Wkt'
        },
        wicketGmap3: {            
            deps: ['wicket']
        }          
    },
});
require(['wicket', 'wicketGmap3'],(Wkt) => {
    $(() => {
        angular.bootstrap(document, ['app']);
    });
});

错误依旧如下

Uncaught ReferenceError: Wkt is not defined at wicket-gmap3.js:744

有没有人遇到过同样的情况？

Answer 1

wicket.js 文件调用了define。所以为它设置一个 shim 是没有用的，因为 shim 只对非 AMD 的“模块”有意义(即文件不是真正的模块，但我们希望表现得像如果他们是)。 AMD 模块调用 define。

另一方面，wicket-gmap3.js 不是 AMD 模块。所以您确实需要shim。但是，这取决于 Wkt 是否存在于全局空间中。 wicket.js 中的逻辑是这样的，当它调用 define 时，它不会在全局空间中设置 Wkt。 (对于性能良好的 AMD 模块， 是正确的行为。)您需要自己执行泄漏。

将您的配置更改为:

define("wicket-glue", ["wicket"], function (wicket) {
    Wkt = wicket; // Deliberately leak into the global space.
    return wicket;
});

require.config({    
    waitSeconds: 200,
    paths: {
        'wicket': '/Vendor/Wicket/wicket',
        'wicketGmap3': '/Vendor/Wicket/wicket-gmap3'
    },
    map: {
        '*': {
            wicket: 'wicket-glue',
        },
        'wicket-glue': {
            wicket: 'wicket'
        }
    }
    shim: {
        wicketGmap3: {            
            deps: ['wicket']
        }          
    },
});

我添加了一个名为 wicket-glue 的新模块。我经常将这些模块与配置放在一起，这样它们就不需要额外的数据获取。如果你愿意，你也可以把它放在一个单独的文件中。 (如果我这样做了，我会删除 define 的第一个参数，并将文件命名为 wicket-glue.js 以便 RequireJS 从文件名中获取模块名称.)

我还添加了一个 map，它基本上说“在所有模块中，当需要模块 wicket 时，加载 wicket-glue相反，但是在 wicket-glue 中，当需要 wicket 时，加载 wicket”。

最终效果是，无论何时需要wicket，Wkt 都会泄漏到全局空间，wicket-glue 应该可以正常工作。