使用jquery-ui小部件

Question

我想使用jquery-ui的可排序小部件。我用以下命令安装了jquery-ui：

bower install jquery-ui

我正在使用require.js。我已经添加了jquery-ui/sortable的一部分：

paths: {
    ...
    'jquery.ui/sortable': 'bower_components/jquery.ui/ui/widgets/sortable'
    ...

在我的模块中，我使用以下命令导入：

define(
[
    'jquery.ui/sortable',
    ...
],
function(
    sortable,
    ...
) {

这会给我带来很多错误，因为sortable.js随后会尝试导入它的依赖项。我能让它工作的唯一方法是为sortable.js的每个依赖项添加一个路径：

    'jquery.ui/sortable': 'bower_components/jquery.ui/ui/widgets/sortable',
    'jquery.ui/mouse': 'bower_components/jquery.ui/ui/widgets/mouse',
    'jquery.ui/scroll-parent': 'bower_components/jquery.ui/ui/scroll-parent',
    'data': 'bower_components/jquery.ui/ui/data',
    'ie': 'bower_components/jquery.ui/ui/ie',
    'version': 'bower_components/jquery.ui/ui/version',
    'widget': 'bower_components/jquery.ui/ui/widget',

这似乎是一种非常艰难的方式。同样，'data'，'ie'，'version‘和'widget’只有在没有命名空间的情况下才有效。

这是使用jquery-ui小部件的正确方式吗？

Answer 1

如果您引用的所有模块最终都在bower_components/jquery.ui/ui/widgets/下，那么您可以使用map，而不是使用列出每个模块的paths：

map: {
  "*": {
    "jquery.ui": "bower_components/jquery.ui/ui/widgets"       
  }
}

这应该将每个对jquery.ui/x的请求映射到bower_components/jquery.ui/ui/widgets。因为映射将一个模块名称转换为另一个模块名称，所以从..导入的bower_components/jquery.ui/ui/widgets中的任何模块都将从bower_components/jquery.ui/ui获得一个模块。