Question

我正在试验yeoman和bower。

我使用以下命令

创建了一个yeoman webapp

yo webapp

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

bower install jquery-ui --save

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

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

感谢您的提示！

Answer 1

在jquery-ui dependencies（或bower.json）component.json以及jquery中添加了{ …, "dependencies": { "jquery": "~1.9.1", "jquery-ui": "~1.10.3", ... }, … }。

bower install

安装它们：

jqueryui

然后，在main.js中添加了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'; ... });的路径并要求它：

{{1}}

它对我有用。

Answer 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>

Answer 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

Answer 4

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

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

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

<强>参考文献：

在主页http://bower.io/

上使用带有凉亭的套餐

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

Answer 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？

5 个答案: