tag:forum.selfhtml.org,2005:/self Was hat es mit AMD auf sich? – SELFHTML-Forum 2017-04-03T06:11:16Z https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691104#m1691104 Christian Wansart 2017-03-30T05:39:26Z 2017-03-30T05:39:26Z Was hat es mit AMD auf sich? <p>Guten Morgen,</p> <p>ich arbeite zurzeit an einem Projekt mit <a href="https://github.com/edx/edx-platform" rel="noopener noreferrer">edx-platform</a> für das ich ein Modul (ein sogenanntes <a href="https://github.com/edx/xblock-sdk/" rel="noopener noreferrer">XBlock</a> schreibe. Nun bindet edX bereits RequireJS ein, was ich auch in meinem Modul benutze. Jedoch packt edX RequireJS aus Kompatibilitätsgründen die Funktionen <code>require</code> und <code>define</code> in den Namensbereich RequireJS. Aus <code>require</code> wird <code>RequireJS.require</code> und aus <code>define</code> wird <code>RequireJS.define</code>. Nun kann ich das in meinem Code nicht einfach ändern, da dieser auch noch von einem anderen Projekt benutzt wird. Meine Idee war es, über die von <code>r.js</code> zusammengestellte Datei einfach <code>define</code> und <code>require</code> einfach zu suchen und zu ersetzen, jedoch ersetze ich dann möglicherweise Begriffe wie „undefined“.</p> <p>Das große Problem ist, dass mein JavaScript-Code verschiedene Bibliotheken braucht wie jQuery, KnockoutJS und KineticJS, welche ebenfalls auf define und define.amd prüfen.</p> <p>Habt ihr Ideen, wie ich das Problem angehen könnte?</p> <p>Freundliche Grüße<br> Christian</p> https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691105#m1691105 dedlfix 2017-03-30T05:45:58Z 2017-03-30T05:45:58Z Was hat es mit AMD auf sich? <p>Tach!</p> <blockquote> <p>Jedoch packt edX RequireJS aus Kompatibilitätsgründen die Funktionen <code>require</code> und <code>define</code> in den Namensbereich RequireJS. Aus <code>require</code> wird <code>RequireJS.require</code> und aus <code>define</code> wird <code>RequireJS.define</code>. Nun kann ich das in meinem Code nicht einfach ändern, da dieser auch noch von einem anderen Projekt benutzt wird.</p> </blockquote> <p>Wenn es keine Konfigurationseinstellung gibt, dem RequireJS zu sagen, dass es die beiden Funktionen im globalen Namensraum anlegen soll, kannst du immer noch im globalen Scope zwei Variablen namens require und define mit einer Referenz auf das RequireJS-Pendant anegen.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691107#m1691107 Gunnar Bittersmann selfhtml@bittersmann.de http://bittersmann.de 2017-03-30T05:50:59Z 2017-03-30T05:50:59Z Was hat es mit AMD auf sich? <p>@@Christian Wansart</p> <pre><code class="block language-js"><span class="token keyword">var</span> require <span class="token operator">=</span> RequireJS<span class="token punctuation">.</span>require<span class="token punctuation">;</span> <span class="token keyword">var</span> define <span class="token operator">=</span> RequireJS<span class="token punctuation">.</span>define<span class="token punctuation">;</span> </code></pre> <p>Dann kannst du <code class="language-js"><span class="token function">require</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> und <code class="language-js"><span class="token function">define</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> aufrufen und sie tun dasselbe wie <code class="language-js">RequireJS<span class="token punctuation">.</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code> bzw. <code class="language-js">RequireJS<span class="token punctuation">.</span>define</code>.</p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691112#m1691112 Rolf b 2017-03-30T07:08:00Z 2017-03-30T07:08:00Z Was hat es mit AMD auf sich? <p>Die edX-er werden sicherlich einen Grund gehabt haben, weshalb sie require und define in ein eigenes Objekt gepackt haben. Wenn Du die beiden Funktionen in den globalen Kontext zurücktransportierst, könnte es genau die Probleme geben, zu deren Lösung das RequireJS Kapselobjekt angelegt wurde.</p> <p>Wäre es für dich eine Alternative, wenn Du in deinem "anderen Projekt" eine globale Variable namens RequireJS anlegst und in deinem Modul so tust, als wärest Du immer im edX Kontext? Also so:</p> <pre><code class="block language-js"><span class="token keyword">var</span> RequireJS <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">require</span><span class="token operator">:</span> require<span class="token punctuation">,</span> <span class="token literal-property property">define</span><span class="token operator">:</span> define <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p><em>Rolf</em></p> https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691251#m1691251 Regina Schaukrug 2017-04-02T21:48:21Z 2017-04-02T21:48:21Z Was hat es mit AMD auf sich? <blockquote> <p>Das große Problem ist, dass mein JavaScript-Code verschiedene Bibliotheken braucht wie jQuery, KnockoutJS und KineticJS, welche ebenfalls auf define und define.amd prüfen.</p> </blockquote> <blockquote> <p>Habt ihr Ideen, wie ich das Problem angehen könnte?</p> </blockquote> <p>Ja. Nachsehen, welche der libs durch 10 Zeilen nativen Code oder eben die anderen Libs ersetzt werden können.</p> <p>##Hinweise:##</p> <p><strong>KineticJS:</strong> KineticJS is a fast, robust, HTML5 Canvas Library that <strong>is no longer maintained.</strong> :: Muss also ohnehin ausgetauscht werden, für neue Projekte nimmt man sowas nicht mehr.</p> <p><strong>KnockoutJS:</strong> Gab es für den Anwendungsbereich nicht auch jQuery UI?</p> https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691106#m1691106 Christian Wansart 2017-03-30T05:47:41Z 2017-03-30T05:47:41Z Was hat es mit AMD auf sich? <p>Moin dedflix,</p> <p>das hatte ich anfangs auch gemacht, jedoch kracht es dann auf der edX-Seite an anderer Stelle.</p> <p>Ich könnte aber in meine „bundle.js“ das eventuell am Anfang machen und dahinter wieder entfernen. Ich denke, das probiere ich mal aus.</p> <p>Freundliche Grüße<br> Christian</p> https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691109#m1691109 Christian Wansart 2017-03-30T06:03:55Z 2017-03-30T06:03:55Z Was hat es mit AMD auf sich? <p>Guten Morgen @Gunnar Bittersmann,</p> <p>genau deshalb möchte ich in meiner „bundle.js“, in der der gesamte JavaScript-Code meines XBlocks drin ist, define und require durch entsprechende RequireJS.define und RequireJS.require ersetzen.</p> <p>Was sich nun beim Suchen nach „define“ in der bundle.js ergeben hat ist, dass dort auch im Quellcode von jQuery und anderen Bibliotheken nach define und define.amd gesucht wird und diese ggf. nutzen. Das müsste ich ja auch irgendwie umleiten, was mit einem einfachen Suchen und Ersetzen nicht geht, da ich dann ggf. auch Bezeichner erwische, die wie wie <code>undefined</code> nur einen Teil ausmachen.</p> <p>Freundliche Grüße<br> Christian</p> https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691115#m1691115 Christian Wansart 2017-03-30T07:44:33Z 2017-03-30T07:44:33Z Was hat es mit AMD auf sich? <p>Das habe ich auch schon überlegt. Dafür müsste ich zwar einige Dateien anpassen, aber das sollte wohl machbar sein.</p> <p>Interessant ist vielleicht noch folgendes: ich habe ein minimales Projekt gemacht was so funktioniert. Im XBlock habe ich den folgenden Code:</p> <pre><code>window.require = RequireJS.requirejs; window.define = RequireJS.require; window.requirejs = RequireJS.define; define('index',['jquery'], function($) { console.log('JUP LÄUFT'); }); requirejs(["index"]); define("main", function(){}); RequireJS.requirejs = RequireJS.requirejs || window.requirejs; RequireJS.require = RequireJS.require || window.require; RequireJS.define = RequireJS.define || window.define; window.require = undefined; window.define = undefined; window.requirejs = undefined; </code></pre> <p>Ebenfalls kommt es bei dem define('index'... zu einem Fehler:</p> <blockquote> <p>Uncaught Error: Module name "index" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded at makeError (require.js:168) at Object.localRequire [as require] (require.js:1436) at requirejs (require.js:1797) at 1?activate_block_id=block-v1%3ATest%2BTest%2BTest%2Btype%40vertical%2Bblock%407cc7f……:1253</p> </blockquote> <p>Jetzt muss ich nur noch herausfinden, was ich da machen kann. Ich denke, ich werde aber deinen Vorschlag mal ausprobieren.</p> <p>Freundliche Grüße<br> Christian</p> https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691119#m1691119 Christian Wansart 2017-03-30T08:28:04Z 2017-03-30T08:28:04Z Was hat es mit AMD auf sich? <p>Moin,</p> <p>lokal funktioniert es, aber <code>r.js</code> kann mit RequireJS.define nichts anfangen und fügt die nicht zusammen… Ich könnte r.js eventuell umschreiben, um das ans Laufen zu bringen. </p> <p>Beste Grüße<br> Christian</p> https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691147#m1691147 Rolf b 2017-03-30T11:58:24Z 2017-03-30T11:58:24Z Was hat es mit AMD auf sich? <p>Hm. Wie ist das denn in dem edX Kontext? Verwenden die r.js nicht? Ansonsten müssten sie ja das gleiche Problem haben...</p> <p><em>Rolf</em></p> https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691150#m1691150 Christian Wansart 2017-03-30T12:01:40Z 2017-03-30T12:02:26Z Was hat es mit AMD auf sich? <p>Moin,</p> <p>ne, die verwenden glaube ich intern kein r.js. Deren Code nutzt halt den Namensbereich RequireJS.</p> <p><em>ABER</em> ich habe das Problem lösen können. Ich konnte in die build.js, die die Optionen für r.js enthält die Option <code>namespace: "RequireJS"</code> angeben. Der wandelt meinen Code, den er einliest um und macht aus define entsprechend RequireJS und so.</p> <p>Nun funktioniert es!</p> <p>Vielen Dank für deine Hilfe, es hat mich auf die richtige Fährte gebracht.</p> <p>Freundliche Grüße<br> Christian</p> https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691252#m1691252 Christian Wansart 2017-04-03T04:04:26Z 2017-04-03T04:04:26Z Was hat es mit AMD auf sich? <p>Guten Morgen Regina,</p> <p>das Problem habe ich nun gelöst. edX hat RequireJS in einen anderen Namensraum geschoben, weswegen ich meinen Code irgendwie dazu bringen muss, diesen auszuführen. RequireJS selbst mitausliefern funktioniert nicht. Hier hat mir nun <code>r.js</code> mit der Option <code>namespace</code> weitergeholfen.</p> <blockquote> <p>Ja. Nachsehen, welche der libs durch 10 Zeilen nativen Code oder eben die anderen Libs ersetzt werden können.</p> </blockquote> <p>Grundsätzlich stimme ich dir zu, jedoch setzt die Software massiv auf JavaScript. Wir reden von wahrscheinlich mehr als 10.000 Zeilen JavaScript-Code…</p> <blockquote> <p>KineticJS: KineticJS is a fast, robust, HTML5 Canvas Library that is no longer maintained. :: Muss also ohnehin ausgetauscht werden, für neue Projekte nimmt man sowas nicht mehr.</p> </blockquote> <p>Dessen bin ich mir bewusst. Aber: zurzeit läuft dort KineticJS Version 4.7.0. Nicht einmal ein einfaches Austauschen mit Version 4.7.4 funktioniert. Die Überlegung Kinetic komplett rauszuschmeißen kam auch schon, gegen eigenen nativen JavaScript-Code oder gar eine alternative Bibliothek auszutauschen. Jedoch ist das gerade nicht der Auftrag und es gibt genug andere Sachen zu tun, sodass ich das zurzeit einfach nicht machen kann. Die Software ist auch zu aufwendig, um das einfach mal eben rauszunehmen. Leider.</p> <blockquote> <p>KnockoutJS: Gab es für den Anwendungsbereich nicht auch jQuery UI?</p> </blockquote> <p>Sicher? Das wird für Observables genutzt. Wenn du mich fragst, in dieser Software eher ohne Notwendigkeit, aber nun ja. Immerhin konnte ich KnockoutJS ohne Probleme auf die aktuelle Version updaten.</p> <p>Freundliche Grüße<br> Christian</p> https://forum.selfhtml.org/self/2017/mar/30/was-hat-es-mit-amd-auf-sich/1691260#m1691260 dedlfix 2017-04-03T06:11:16Z 2017-04-03T06:11:16Z Was hat es mit AMD auf sich? <p>Tach!</p> <blockquote> <p><strong>KnockoutJS:</strong> Gab es für den Anwendungsbereich nicht auch jQuery UI?</p> </blockquote> <p>Nein, andere Baustelle. jQuery UI sind Komponenten für das Frontend in Webanwendungen. KnockoutJS ist Datenbindung, ein Bindeglied zwischen Backend und Frontend von Webanwendungen.</p> <p>dedlfix.</p>