23

我正在试验yeomanbower

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

yo webapp

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

bower install jquery-ui --save

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

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

感谢您的提示!

4

5 回答 5

17

添加jquery-uidependencies(bower.jsoncomponent.json) 以及jquery.

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

安装它们:

bower install

然后,添加路径到jqueryuiInmain.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';
   ...
});

这个对我有用。

于 2013-05-20T08:06:05.763 回答
5

在我们所说的最新 jQuery UI bower 组件(v. 1.10.3)中,您可以执行以下操作:

  1. 对于 CSS 主题,请包含以下链接:

    <link rel="stylesheet" href="bower_components_path/jquery-ui/themes/base/jquery-ui.css">

  2. 要让 jQueryUI 的大多数组件和小部件运行,请包含以下脚本:

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

于 2013-12-16T23:05:24.360 回答
5

作为参考,bower install jquery-ui --savejquery-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

于 2016-03-02T07:21:41.543 回答
3

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

<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

于 2013-04-30T13:23:05.857 回答
-2

您可以使用 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,然后再自行执行。

不幸的是,这仍然会产生竞争条件......但这通常是一个人会如何去做(:

于 2013-10-08T09:26:19.020 回答