与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/corejquery-ui/widgetjquery-ui/mousejquery-ui/draggablejquery-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命令中引用gridstackgridstack.jqueryui

查看您正在尝试加载的jquery-ui.js文件,我发现它是多个函数的组合,可以在单独的文件中并且它只调用一次。 因此它注册为单个模块。 这一点很重要,因为如果它为每个jquery-ui/mousejquery-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 ,依此类推,以便列在*下面的所有其他模块。