Jquery ui bower ile nasıl kullanılır?

Question

yeoman ve bower ile deneme yapıyorum.

Ben

yo webapp 

Ben bu yüzden çardak kullanarak yüklemiş jqueryui kullanmak istediğiniz aşağıdaki komutu kullanarak bir çiftçi webapp yarattık:

bower install jquery-ui --save 

Bu iyi çalışır, ancak jQuery UI bileşeni bileşenlerin "tümünü" içeren bir javascript dosyası içermiyor, yalnızca her bir bileşen için bir çok javascript dosyası içeriyor.

Sadece ihtiyacım olan javascript dosyalarını dahil etmeli miyim? Ya da jQuery UI'yi kullanmadan önce başka bir şey yapmalı mıyım?

İpuçları için teşekkürler!

Answer 1

Her şeye ihtiyacınız varsa veya yalnızca deneme için gerekiyorsa, yalnızca ihtiyacım olan dosyaları veya varsayılan özel derlemeyi (tüm bileşenlere sahip olduğuna inanıyorum) klasörde kullanın. bu kez kulübeye anda

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

tüm repo aşağı çeker ve o zamandan beri (kendi web sitesinden) başka bir şey birleştirme veya modül yükleme dişliler/requirejs gibi diğer araçlar tarafından yönetildiğini tespit gerekli "Bower sadece bir paket yöneticisidir."

Referanslar:

çardağımıza ilgili ana sayfasında çardağımıza ile kullanılması paketleri http://bower.io/

Dissusion ve jquery ile birlikte çekme tüm Repo https://github.com/bower/bower/issues/45

Answer 2

bower.json (veya component.json) arasında dependencies de Katma jquery-ui.

bower install 

Sonra main.js yılında jqueryui yolunu eklendi ve bunu gerektirir:

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

bunları yükleyin

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'; 
    ... 
}); 

Bana uyar.

, o jquery.ui.sortable, projenizde gerektiğinde, yük ve deps altında listelenen modülleri yürütmek gerekiyor Biz Belirttiğiniz

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

:

Answer 3

Sen hedefe ulaşmak için requirejs.config en şim özelliğini kullanabilirsiniz önce, kendini idam edilmeden önce.

Maalesef bu hala bir yarış durumu üretir ... Ama bu bir tercih ediyorsa genellikle bu (: en son jQuery UI kameriye bileşeninde

Answer 4

biz (v konuşurken 1.10..3), aşağıdakileri yapabilirsiniz:

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

çoğu bileşenleri ve çalışan jQueryUI widget almak için, aşağıdakileri içerir: CSS temaları için

1. aşağıdaki bağlantıyı içerir komut:

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

Answer 5

Referans için, bower install jquery-ui --save, projeye jquery-ui.js bağımlılığını ekler, ancak stilleri eklemez. Bunun için ben

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

aşağıda Referanslar gibi bower.json Dosya bir overrides bölüme eklemek için gerekli:

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

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