我正在使用图书馆 Wicket对于 map 的东西。如果我像往常一样将它作为脚本标记引用,它工作正常。工作链接如下。
当我们的项目使用 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
有没有人遇到过同样的情况?
最佳答案
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
应该可以正常工作。
关于javascript - RequireJS 加载 Wicket 库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41254745/