1

我正在使用图书馆Wicket来获取地图。如果我像往常一样将它作为脚本标签引用，它工作正常。工作链接如下。

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']);
    });
});

错误仍然如下。

未捕获的 ReferenceError：Wkt 未在 wicket-gmap3.js:744 中定义

有没有人有同样的经历？

4

1 回答 1

2

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

另一方面wicket-gmap3.js，它不是 AMD 模块。所以你确实需要shim它。但是，这取决于Wkt是否存在于全局空间中。in 的逻辑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应该可以正常工作。

于 2016-12-21T10:46:12.847 回答