web-dev-qa-db-ja.com

Bowerでjquery uiを使用するには？

yeoman および bower で実験しています。

次のコマンドを使用して、yeoman webappを作成しました

yo webapp

jqueryui を使用したいので、bowerを使用してインストールしました。

bower install jquery-ui --save

これは正常に機能しますが、jQuery UIコンポーネントには「すべて」のコンポーネントを含むjavascriptファイルが含まれておらず、コンポーネントごとに1つずつ、多くのjavascriptファイルが含まれています。

必要なjavascriptファイルのみを含めるべきですか？または、jQuery UIを使用する前に別のことを行う必要がありますか？

ヒントをありがとう！

jquery-uiyeomanbower
23
cremersstijn

jquery-ui（またはbower.json）のdependenciesにjqueryとともにcomponent.jsonを追加しました。

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

それらをインストールします。

bower install

次に、jqueryui In 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';
   ...
});

わたしにはできる。

16
hiroshi

参考として、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

5
shadi

最新の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>

5
ambodi

あなたがすべてを必要とする場合、または実験のためだけである場合、必要なファイルを含めるか、フォルダにデフォルトのカスタムビルドを使用します（これにはすべてのコンポーネントがあると信じています）。

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

この時点で、bowerはレポジトリ全体をプルダウンします。（ウェブサイトから）「bowerは単なるパッケージマネージャーである」ため、連結やモジュールのロードなど必要なものはsprockets/requirejsなどの他のツールで処理されます。

参照：

ホームページでbowerでパッケージを使用する http://bower.io/

バウアーについての議論とリポジトリ全体のプル https://github.com/bower/bower/issues/45

3
Craig MacGregor