如何在凉亭中使用 jquery ui？答案

【问题标题】：How to use jquery ui with bower?如何在凉亭中使用 jquery ui？
【发布时间】：2013-04-29 17:04:37
【问题描述】：

我正在试验yeoman 和bower。

我使用以下命令创建了一个 yeoman webapp

yo webapp

我想使用jqueryui，所以我使用 bower 安装了它：

bower install jquery-ui --save

这很好用，但是 jQuery UI 组件不包含包含“所有”组件的 javascript 文件，它只包含很多 javascript 文件，每个组件一个。

我应该只包含我需要的 javascript 文件吗？或者在使用 jQuery UI 之前我应该做些什么？

感谢您的提示！

【问题讨论】：

标签： jquery-ui yeoman bower

【解决方案1】：

在dependencies 的dependencies（或component.json）中添加了jquery-ui 以及jquery。

{
  …,
  "dependencies": {
    "jquery": "~1.9.1",
    "jquery-ui": "~1.10.3",
    ...
  },
  …
}

安装它们：

bower install

然后，在main.js 中添加jqueryui 的路径并要求它：

require.config({
  paths: {
    jquery: '../components/jquery/jquery',
    jqueryui: '../components/jquery-ui/ui/jquery-ui',
    …
  },
  shim: {
    jqueryui: 'jquery',
    …
  },
  …
});
require(['app', 'jquery', 'jqueryui', 'bootstrap'], function (app, $) {
  'use strict';
   ...
});

它对我有用。

【讨论】：

OP 没有提到 require.js

【解决方案2】：

在我们所说的最新 jQuery UI bower 组件（v. 1.10.3）中，您可以执行以下操作：

对于 CSS 主题，请包含以下链接：

<link rel="stylesheet" href="bower_components_path/jquery-ui/themes/base/jquery-ui.css">
要让 jQueryUI 的大多数组件和小部件运行，请包含以下脚本：

<script src="bower_components_path/jquery-ui/ui/jquery-ui.js" ></script>

【讨论】：

【解决方案3】：

作为参考，bower install jquery-ui --save 会将 jquery-ui.js 依赖项添加到项目中，但不会添加样式。为此，我需要在bower.json 文件中添加一个overrides 部分，如下所示

{
  ...,
  "dependencies": {
    ...,
    "jquery-ui": "^1.11.4" // already added with --save from bower install command
  },
  ...,
  "overrides": {
    "jquery-ui": {
      "main": [
        "themes/smoothness/jquery-ui.css",
        "jquery-ui.js"
      ]
    }
  }
}

参考资料：

https://stackoverflow.com/a/27419553/4126114

https://github.com/taptapship/wiredep/issues/86

【讨论】：

如果您想要自定义构建 jquery-ui，使用wiredep 的overrides 也可以很好地工作

【解决方案4】：

如果您需要所有内容或仅用于实验，我将只包含我需要的文件或使用文件夹中的默认自定义构建（我相信它包含所有组件）。

<script src="components/jqueryui/ui/jquery-ui.custom.js"></script>

此时 bower 拉下了整个 repo，因为（从他们的网站上）“bower 只是一个包管理器”，其他任何需要的东西，比如连接或模块加载，都由 sprockets/requirejs 等其他工具处理。

参考资料：

在主页上使用带有凉亭的包http://bower.io/

关于凉亭和拉动整个回购的讨论 https://github.com/bower/bower/issues/45

【讨论】：

好帖子！ bower 的想法很棒，但它确实缺乏一种交付整个库包的方法（即使项目没有编译成单个资源）。到目前为止，凉亭是一场噩梦:)
自 1.10.2 起，jquery-ui.custom.js 不再存在。我想你需要一些繁重的任务来构建它？

【解决方案5】：

您可以使用 requirejs.config 的 shim 属性来实现您的目标：

requirejs.config({
    shim: {
        'jquery.ui.sortable': {
            deps: ['jquery', 'jquery.ui.core', 'jquery.ui.widget', 'jquery.ui.mouse', 'jquery.ui.position'],
            exports: '$'
        }
    }
});

我们指定，jquery.ui.sortable 在您的项目中需要时，需要先加载并执行deps 下列出的模块，然后再自行执行。

不幸的是，这仍然会产生竞争条件...但这通常是人们会采取的方式（：

【讨论】：

我不认为 jquery.ui.position 是 jquery.ui.sortable 的要求。
其实文档中没有提到 jquery.ui.position 是必须的，但肯定是！
OP 没有提到 require.js