require js

[Gast]

  <script data-main="workspace/assets/js/main.js" src="workspace/assets/js/require.js" />
<!-- (...) -->
 <script type="text/javascript">
require( ['lib/pic'],  function( pic) {
});</script>

main.js:

requirejs.config({
    paths: {
       jquery: 'vendor/jquery-1.10.2.min',
       underscore: 'vendor/underscore-min',
       backbone: 'vendor/backbone-min',
      },   
      shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        }
      },
      wrapShim: false,
      logLevel: 0
});

lib/pic.js:

define(['backbone'], function (Backbone) {});

"GET /workspace/assets/js/require.js HTTP/1.1" 200
"GET /workspace/assets/js/main.js HTTP/1.1" 200
"GET /workspace/assets/js/lib/pic.js HTTP/1.1" 200
"GET /workspace/assets/js/vendor/backbone-min.js HTTP/1.1" 200

und ab und an eben:
"GET /workspace/assets/js/lib/pic.js HTTP/1.1" 200
"GET /workspace/assets/js/main.js HTTP/1.1" 200
"GET /workspace/assets/js/backbone.js HTTP/1.1" 404

ich hab da wohl was grundlegendes bei require.js nicht verstanden:

// This code might be called before the require.config() in main.js
// has executed. When that happens, require.js will attempt to
// load 'scripts/foo.js' instead of 'scripts/libs/foo-1.1.3.js'
require( ['foo'], function( foo ) {

});

wie kann ich den seiteneffect verhindern?

[rkr]

OT: Musst du eigentlich mit requirejs arbeiten? Ich mache das mit php-require. Kannst nebenbei noch on-the-fly komprimieren und hast nachher nur eine datei. Ähnlich wie bei requirejs wird auch nur geladen, was du wirklich brauchst.

[Gast]

hm, komme eigentlich ganz gut zurecht mit require.js, hopefully
grunt wäre sicher eine alternative, ist doch eine?
aber ich entwickle ausschlieslich für webspaces, und da komme ich mit grunt nu nicht so hin.

//OT:
1.)
wie soll ich das mit php-require machen, wo doch die verzahnung der anwendugslogik ausschliesslich in js deffiniert wird.
2.) ich finde reuire.js schon deswegen toll, weil ich so wenig variablen im window context deffinieren muss, fallbacks für timeouts deffinieren kann, verscheidene versionen einer lib benützen kann, ach so vieles.

[rkr]

Du könntest in js php's require_once() benutzen, wie du es auch in php benutzt. Brauchst dann aber mod_rewrite um einen Bootstrap zu starten. Der Bootstrap muss dann die ursprünglich angeforderte Datei als Startdatei laden. Andererseits kannst du requirejs' require() parsen und selbst auflösen. Möglichkeiten gibt es da genug.

[lottikarotti]

Hallöchen,

grunt wäre sicher eine alternative, ist doch eine?
aber ich entwickle ausschlieslich für webspaces, und da komme ich mit grunt nu nicht so hin.

Äh, wat?

Für kleine Web-Projekte lasse ich mir die vorhandenen JavaScript-Dateien via Grunt-Task automatisiert in meine index.html einbinden. Das ist während der Entwicklung ganz praktisch. Um das Ding für den Produktivbetrieb vorzubereiten, wird ein simpler Build-Prozess durchlaufen, der alles zusammenschnürt, komprimiert und in das build-Verzeichnis wirft. Dessen Inhalt kann direkt auf den Ziel-Server geladen werden - bei mir ist auch dieser Schritt automatisiert, bzw. kann ich das mit einem Befehl durchhauen.

Viele Grüße,
lotti

[Gast]

ok, hatte ich was falsch verstanden bei grunt, mir aber auch noch nicht angeschaut.
kann man ja nachholen, beizeiten. hast du ne idee wo das bei mir so läuft?

[rudygotya]

Hi Moma,

das liegt daran, dass requirejs seine Konfiguration asynchron nachlädt. Beim require auf die lib (die wiederum Backbone nachladen will) ist die Konfiguration noch nicht geladen. Daher erfolgt der erste require-call oft direkt aus der Konfiguration heraus:

requirejs.config({

    baseUrl: '/workspace/assets/js/',
    paths: {
       jquery: 'vendor/jquery-1.10.2.min',
       underscore: 'vendor/underscore-min',
       backbone: 'vendor/backbone-min',
      },   
      shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        }
      },
      wrapShim: false,
      logLevel: 0
});

require( ['lib/pic'],  function( pic) {

    pic.kickoff();
}); 

Alternativ kannst du im Vorfeld die Konfiguration in der Variable require vordefinieren.

<script>
var require = {

    baseUrl: '/workspace/assets/js/',
    paths: {
       jquery: 'vendor/jquery-1.10.2.min',
       underscore: 'vendor/underscore-min',
       backbone: 'vendor/backbone-min',
      },   
      shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        }
      },
      wrapShim: false,
      logLevel: 0
};
</script>
<script src="require.js"></script>
<script>
require( ['lib/pic'],  function( pic) {

    pic.kickoff();
});
</script> 

Der erste Weg bietet sich vor allem fürs lokale Entwickeln an. Dabei kannst du requirejs auch nur als Scriptloader missbrauchen. In der Konstellation kannste dir dann von r.js (node-basierter requirejs-Kompiler) ein Asset bauen lassen.

Tor 2 ist wichtig, wenn du mit kompilierten Assets arbeitest, die einen kleinen Teil (bspw. die Internationalisierung, selten benötigte Module, ...) per require nachladen wollen.


Grüße


Basti

[Gast]

thx,
Tor eins läuft bei mir leider nicht völlig zuverlässig.
werde wohl tor zwei nehmen müssen; dabei war mir die scriptloader funktionalität schon mächtig genug. we will see.
tor zwei scheint super zu klappen. da teile der header daten sowieso zentral eingebunden werden, ist mir das so auch recht.
das mit vorkompilieren und so schau ich mir an asap, momentan bin ich froh so halbwegs strukturiert arbeiten zu können.

[rkr]

Das Ziel ist es letztendlich doch, aus allen js-Dateien eine große, komprimierte und optimierte (!0 statt true) Datei zu bauen, die dann mit nur einem Script-tag geladen werden kann. Sobald man mehr als 2 (oder 4) Script-Tags braucht, muss immer erst alles zuendegeladen werden, bevor das jeweils nächste Script geladen werden kann. Requirejs macht ja nichts anderes. Bei vielen Scripten wird das irgendwann nervig, weil es den Entwicklungsprozess (ctrl+s, F5) verlangsamt. Wenn es nur wenige Scripte betrifft, dann ist das Problem nicht so gravierend, wenn denn überhaupt spürbar.

In einer älteren ExtJS Anwendung waren das nachher über 150 Scripte, die im DevMode bei F5 neu geladen werden mussten. Das hat bald 10 Sekunden gedauert bis ExtJS losrannte. Als ich dann alles über php zusammengefasst habe, war der Ladevorgang von ~300kb Javascript nach wenigen hundertstel Sekunden bereits abgeschlossen.

Den selben Effekt hast du bei Bildern auch, warum ganz gerne auf Sprites zurückgegriffen wird. Oder bei css, weswegen heute praktisch jeder bessere Entwickler LESS, oder SASS (oder ähnliches) einsetzt, die direkt komprimieren und optimieren können.

Das geht natürlich durch ein Buildscript auch! Wenn du MacOS einsetzt, kannst du den Automator nutzen um einen HotFolder zu erstellen. Unter Windows kann PHPStorm sowas direkt. Du musst dann aber immer noch kurz warten, bis alles fertig ist.

[Gast]

man kann so viel, ich will so wenig.
und dank rudygotya klappt auch alles wie es soll; und das nicht zum ersten mal.

[Gast]

und weil alles so gut lief, gleich mal weiter:

define ([ 'require', 'jquery', 'vendor/masonry.pkgd',  'backbone'],
    function( define, $, Masonry, Backbone ) {
   
      define( [ 'jquery-bridget/jquery.bridget'],
         function () { 
             return {
                  Model:  Backbone.Model.extend({}),
                  View: Backbone.View.extend({})
              }
         });
    });

fehlermeldung pic.Model ist kein constuctor. scheint mir auch klar, habe ja im äuseren define() kein return. nur, wo krieg ich da her, was ich returnen muss?
einfach ein return require() klappt nicht.

//edit:

     /* hier find ich mein modul als undefined */
console.debug(this.require.s.contexts._.defined);
     /* hier find ich mein modul  unter _@r4.depMaps aber nicht unter _@r4.depExports */
console.debug(this.require.s.contexts._.registry);

was dem findigen js profi sicher was sagt.

nebenbei:
findNestedDependencies: true hat rein gar nichts gebracht.

//edit 2:
Davon hab ich mir viel versprochen:

exports.pic =  {
	  View: pictureView,
	  Model: pictureModel,
          Collection: pictureCollection,
          List: pictureList
  };

immerhin:

Properties added to the exports object will be on the public interface of the module, no need to return any value.

aber es will nicht so wie ich will;

not a constructor kommt da wieder

gut und schön, erportieren wir es im zweiten define:

define( ['jquery-bridget/jquery.bridget'],
  exports.pic = function () {};
);

muss ich mein modul mit pic.pic ansprechen, geht auch so lala.

new pic.pic().Model({});

aber, Type error: this.set is not a function -> backbone.min.js line 1
wieso geht dann backbone nicht mehr?

//edit3:

 define( ['jquery-bridget/jquery.bridget'], exports.pic = (function () {})());

soweit so gut.
pic.pic ist mein modul.
aber der name ist ja unter aller sau, kann man da nicht ein pic rausschneiden, damit es nur noch pic heisst?

[rkr]

OT:
Und dann gibt es ja noch ... browserify

[Gast]

das mit dem namen geht wohl easy, einfach ein exessiverer gebrauch von export wird's richten denke ich.
//OT:
ich kann leider nichts von verschachtelten require anweisungen finden bei dem verlinkten tool, rkr. liegt wohl auch daran, dass der code bei mir unter aller sau dargestellt ist, aber das ist neurdings ja üblich. und bei jedem block auf view-raw clicken muss ja auch nicht sein.
aber danke dass du dich mit dem problem beschäftigt hast.

[rudygotya]

Schau dir mal die Doku zu shim an, damit kannst du die Abhängigkeiten von Libraries, die keine AMD-Module darstellen, definieren.

require.config({
    baseUrl : 'js/',

    paths : {
        jquery : './vendor/jquery.min',
        backbone : './vendor/backbone-min',
        underscore : './vendor/underscore-min',

        jBridget : './vendor/jquery.bridget',
        masonry : './vendor/masonry.min',
        
        app : './FooBarApp'
    },
    shim : {
        // kurznotation, lässt sich auch expliziter mit export-Variable angeben
        jBridget : [ 'jquery' ],
        backbone : [ 'jquery', 'underscore' ],
        
        masonry : [ 'jquery', 'jBridget' ],
        

        app : [
            'backbone'
        ]
    }
}); 

Deine View definierst du dann etwa so:

define([ 
    // relativer Pfad aus Sicht von FooBarApp, damit das funktioniert, immer ./ voranstellen
    './model/Pic', 
    // benamtes Modul aus shim-cfg
    'masonry'
     ], function( PicModel ) {

    FooBarApp = function() {
        this.model = new PicModel();
    }
    
    return FooBarApp;
}); 

Bei dem, was du da vorhast, könnte dich auch das hier interesseren.
https://github.com/atesgoral/requirejs-namespace-plugin

P.S.: browserify ist auch geil

[Gast]

sieht eleganter aus. den anderen weg hab ich hier aufgeschnappt:
http://masonry.desandro.com/appendix.html#requirejs

wie dem auch sei, hab was gelernt, oder auch nicht; schreib es wohl so um, wie du vorgeschlagen hast. thx.