Wie man jquery ui mit Laube benutzt?

Question

Ich experimentiere mit yeoman und bower.

Ich habe ein Yeoman Webapp mit dem folgenden Befehl erstellt

yo webapp 

Ich möchte jqueryui verwenden, so habe ich installiert es Bower mit:

bower install jquery-ui --save 

Dies funktioniert gut, aber die jQuery UI-Komponente enthält keine Javascript-Datei mit "allen" Komponenten, es enthält nur eine Menge von Javascript-Dateien, eine für jede Komponente.

Sollte ich nur die Javascript-Dateien enthalten, die ich brauche? Oder sollte ich etwas anderes tun, bevor ich jQuery UI benutze?

Danke für die Tipps!

Answer 1

Ich würde nur die Dateien, die ich brauche, oder verwenden Sie die Standard-benutzerdefinierten Build in den Ordner (die ich glaube, hat alle Komponenten), wenn Sie alles oder wenn es nur zum Experimentieren ist.

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

Zu diesem Zeitpunkt Bower zieht den gesamten Repo nach unten und da (von der Website) „Bower ist nur ein Paket-Manager“ alles andere Verkettung oder Laden von Modulen benötigt wie durch andere Werkzeuge wie Zahnräder/requirejs gehandhabt wird.

Referenzen:

Verwendung von Paketen mit Bower auf der Homepage http://bower.io/

Dissusion über Bower und ziehen ganze repos https://github.com/bower/bower/issues/45

Answer 2

Added jquery-ui in dependencies von bower.json (oder component.json) zusammen mit jquery.

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

sie installieren:

bower install 

Dann Pfad In main.js-jqueryui hinzugefügt und es erfordert:

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

Es funktioniert für mich.

Answer 3

könnten Sie requirejs.config die Shim-Eigenschaft verwenden, um Ihr Ziel zu erreichen:

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

Wir spezifiziert, dass jquery.ui.sortable, wenn Sie in Ihrem Projekt erforderlich ist, laden muss und führen Sie die aufgelisteten Module unter deps zuerst, bevor es selbst ausgeführt wird.

Leider ist dies noch produziert eine Race-Bedingung ... Aber das ist in der Regel, wie man über dieses (gehen würde:

Answer 4

In der neuesten jQuery UI Bower Komponente, wie wir (v sprechen 1.10..3) können Sie wie folgt vorgehen:

1. Für die CSS Themen umfassen den folgenden Link:

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

2. Um die meisten Komponenten und Widgets von jQueryUI zum Laufen bringen, gehören die folgenden Skript:

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

Answer 5

Als Referenz würde bower install jquery-ui --save die jquery-ui.js Abhängigkeit zum Projekt hinzufügen, aber nicht die Stile. Dafür musste ich die bower.json Datei ein overrides Abschnitt hinzuzufügen, wie weiter unten

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

Referenzen:

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

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