JQuery UI 和 RequireJS 不正确地映射小部件

Posted 2023-03-27

【中文标题】JQuery UI 和 RequireJS 不正确地映射小部件

【英文标题】：JQuery UI and RequireJS are mapping widgets incorrectly

【发布时间】：2018-06-03 06:45:15

【问题描述】：

我正在使用 RequireJS 加载 Knockout Sortable (v1.10)，它具有 jquery-ui (v1.12) 作为依赖项。这两个都是通过 bower 添加的，并放在我的 require 配置中。但是，我在 require 错误地获取某些小部件的路径时遇到了一些奇怪的问题。

jquery-ui 的路径如下所示：

paths: 
    ...
    'jquery-ui': '/lib/jquery-ui/jquery-ui',
    ...
    // or the .min version like below:
    // 'jquery-ui': '/lib/jquery-ui/jquery-ui.min',

jquery-ui 的东西加载没有任何问题，但组件变得疯狂。我的控制台日志如下所示：

GET http://localhost:5000/lib/jquery-ui/jquery-ui/ui/widgets/draggable.js net::ERR_ABORTED    
require.min.js:5 Uncaught Error: Script error for "jquery-ui/ui/widgets/draggable", needed by: knockout-sortable
http://requirejs.org/docs/errors.html#scripterror
    at l (require.min.js:5)
    at HTMLScriptElement.onScriptError (require.min.js:5)

对于 3 个单独的小部件，我遇到了同样的错误。这些小部件位于 /lib/jquery-ui/ui/widgets/*.js，但 RequireJS 在前面添加了第二个 jquery-ui 目录。

Knockout Sortable 请求资源如下：

require("jquery-ui/ui/widgets/sortable");
require("jquery-ui/ui/widgets/draggable");
require("jquery-ui/ui/widgets/droppable");

我尝试了各种方式的匀场和映射，但似乎没有任何效果，所以我有点不知所措。

另外注意，如果我使用jquery-ui.min，路径会变成：

http://localhost:5000/lib/jquery-ui/jquery-ui.min/ui/widgets/*.js

【参考方案1】：

经过一番修改后，我发现我需要稍微修改我的路径如下：

paths: 
    ...
    'jquery-ui': ['/lib/jquery-ui/jquery-ui.min'],
    'jquery-ui/ui': ['/lib/jquery-ui/ui'],
    ...

事实证明，稍微更具体的定义版本允许我覆盖正在发生的奇怪行为。当我使用另一个名为 NestedSortable 的包时，这个问题变得复杂了两倍。此包尚未更新以处理 jQuery UI 1.12+ 的新文件夹结构。所以我不得不分叉那个 repo 并创建一个新的 bower 包。