与RequireJS的冗余依赖项
我的问题是具有指向同一JS库的冗余RequireJS依赖项。
引用的库是jQuery UI ,它在内部和外部库Gridstack引用 ,这导致了这个问题。
内部和外部引用都应指向一个文件jquery-ui.js
。
如何配置RequireJS(即在main.js
)来处理这些引用,而不对任何现有的模块/库进行任何更改?
-
JQuery UI v1.11.2 – 我的JQuery UI分发(单个文件)
-
Gridstack 0.2.5-dev – 将其引用为
jquery-ui/core
,jquery-ui/widget
,jquery-ui/mouse
,jquery-ui/draggable
和jquery-ui/resizable
-
我
jquery.ui
内部使用jquery.ui
虽然路易斯的回答指出了我正确的方向,但我仍然花了一些时间来找出完整的解决方案,所以我在这里发布我的工作requirejs配置以供将来参考:
requirejs.config( { baseUrl: 'js', paths: { jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min', 'jquery.ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min', lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min', gridstack: 'https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.min', 'gridstack.jqueryui': 'https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.jQueryUI.min', }, map: { '*': { 'jquery-ui/data': 'jquery.ui', 'jquery-ui/disable-selection': 'jquery.ui', 'jquery-ui/focusable': 'jquery.ui', 'jquery-ui/form': 'jquery.ui', 'jquery-ui/ie': 'jquery.ui', 'jquery-ui/keycode': 'jquery.ui', 'jquery-ui/labels': 'jquery.ui', 'jquery-ui/jquery-1-7': 'jquery.ui', 'jquery-ui/plugin': 'jquery.ui', 'jquery-ui/safe-active-element': 'jquery.ui', 'jquery-ui/safe-blur': 'jquery.ui', 'jquery-ui/scroll-parent': 'jquery.ui', 'jquery-ui/tabbable': 'jquery.ui', 'jquery-ui/unique-id': 'jquery.ui', 'jquery-ui/version': 'jquery.ui', 'jquery-ui/widget': 'jquery.ui', 'jquery-ui/widgets/mouse': 'jquery.ui', 'jquery-ui/widgets/draggable': 'jquery.ui', 'jquery-ui/widgets/droppable': 'jquery.ui', 'jquery-ui/widgets/resizable': 'jquery.ui', } }, } ); require( ['dashhub'] );
请注意,我似乎无法使用gridstack.all.js
脚本。 这意味着在您的模块中,您必须在define命令中引用gridstack
和gridstack.jqueryui
。
查看您正在尝试加载的jquery-ui.js
文件,我发现它是多个函数的组合,可以在单独的文件中,并且它只调用一次。 因此它注册为单个模块。 这一点很重要,因为如果它为每个jquery-ui/mouse
, jquery-ui/draggable
等调用了define
,那么解决方案会有所不同,因为那时我们将讨论包含多个的单个jQuery UI文件模块。
好的,所以这个建立,你可以做的是在RequireJS配置中使用一个map
。 我假设你已经有一个正确的paths
配置,允许加载jquery-ui.js
文件作为jquery.ui
模块。 添加此地图:
map: { '*': { 'jquery-ui/mouse': 'jquery.ui', 'jquery-ui/draggable': 'jquery.ui', // And so on for all different cases... } }
这表示在请求jquery-ui/mouse
时所有模块( *
)中,然后加载jquery.ui
,依此类推,以便列在*
下面的所有其他模块。