jquery uiとbowerの使い方は？

Question

私はyeomanとbowerを試しています。

私は

yo webapp 

私はので、私はそれが亭使用してインストールしたjqueryuiを使用する次のコマンドを使用してヨーマンWebアプリケーションを作成しました：

bower install jquery-ui --save 

これは正常に動作しますが、jQueryのUIコンポーネントコンポーネントの「すべて」を含むjavascriptファイルを含んでいません。コンポーネントごとに1つのjavascriptファイルが多数含まれています。

必要なjavascriptファイルのみを含める必要がありますか？または、jQuery UIを使用する前に何か他の操作を行う必要がありますか？

ヒントをありがとう！

Answer 1

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

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

このとき亭が引き下げ全体のレポと（自分のウェブサイトから）以来の連結またはモジュールのロードがスプロケット/ requirejsのような他のツールによって処理されるように必要に応じて他の何か「亭は単なるパッケージマネージャです」。

参考文献：

は亭に関するホームページhttp://bower.io/

Dissusionに亭でパッケージを使用して https://github.com/bower/bower/issues/45

Answer 2

全体のレポを引っ張っjqueryとともにbower.json（またはcomponent.json）のdependenciesでjquery-uiを追加しました。

{ 
    …, 
    "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'; 
    ... 
}); 

それは私のために動作します。

Answer 3

あなたはあなたの目標を達成するためにrequirejs.configのシムプロパティを使用することができます

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の下にリストされたモジュールをロードして実行する必要があることを、指定されました最初に、それ自体が実行される前に。

残念ながら、これはまだ競合状態を作り出す...しかし、それは1つが、この（ついて行くだろうか、一般的です。我々は（V話す最新のjQuery UIの亭コンポーネントで

Answer 4

1.10。3）は、次のことが可能です。

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

ほとんどのコンポーネントと実行しているjQueryUIのウィジェットを取得するには、次のものがあります。CSSのテーマについては

1. を、次のリンクを含めますスクリプト：

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

Answer 5

参考として、bower install jquery-ui --saveは、プロジェクトにはjquery-ui.jsの依存関係を追加しますが、スタイルは追加しません。そのために私は

{ 
    ..., 
    "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" 
     ] 
    } 
    } 
} 

以下の参考文献として、 bower.jsonファイル overridesセクションに追加する必要：

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

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