Ich versuche Grunzen und benötigen eine einfache Möglichkeit zum verketten meine Module

Dies ist mein erstes mal mit Grunzen und ich hätte es gern kombinieren alle meine js-Module, die jeweils eingewickelt in eine sofort ausgeführte Funktion, die eine 'use strict' - Erklärung und legen Sie Sie in einer Datei, eingewickelt in nur einer sofort ausgeführten Funktion mit nur einem 'use strict' - Erklärung.

Wie wird das normalerweise gemacht?

Ich dachte, dies wäre ein üblicher Fall? Vielleicht werde ich über die Dinge der falsche Weg ist? Soll ich mich mit einem laden des Moduls-Formate (d.h. commonjs, amd) Alle diese Dateien immer geladen werden zusammen in den browser, so dass ich eigentlich nicht stören würde, dass alle sofort Ausführung von Funktionen, wie Menschen in der Regel gehen über es. Der wichtige Teil ist, dass das Endergebnis irgendwie gewickelt, geht Fussel-und unit-tests und enthält das 'use strict' - Erklärung.

(Ich sollte klarstellen, ich habe es zu arbeiten, linting, unit-testing, verketten und minifying, es fühlt sich an wie ich etwas Falsches Tue, wenn ich sehe einen Haufen von unnötigen sofort Ausführung von Funktionen in der endgültigen Datei verkettet.)

InformationsquelleAutor uglymunky | 2012-10-16
  1. 22

    Normalerweise mache ich es wie die jQuery-team hat es. Erstellen Sie eine intro.js und outro.js und alles dazwischen:

    intro.js

    ;(function( window, undefined ){
  'use strict';

    outro.js

    }( window ));

    grunt.js:

    concat: {
  dist: {
    src: [
      'js/src/intro.js',
      ...
      'js/src/outro.js'
    ],
    dest: 'js/out/app.js'
  }
}
    • verdammt, ich sah sogar bei Ihren github-repo zu sehen, wie Sie Taten es aber absolut nicht, dass zu fangen, Dank!
    • Ich benutze eigentlich Grunzen, dies zu tun mit meiner statischen html-während der Entwicklung. Und ich begann das gleiche zu tun mit js, aber anstelle von intro/outro verwende ich Kopf-und Fußzeile. Da brauche ich nicht zum dynamischen aktualisieren von doc-Titel während der Entwicklung, es funktioniert Super.
    InformationsquelleAutor elclanrs
  2. 34

    Als der pull-request 10, grunt-contrib-concat hat jetzt eine footer option. Statt eines intro und eines outro-Datei, die ich benutzen würde ein banner und ein Fußzeile.

    Gruntfile.js

    concat: {
  dist: {
    src: ['src/my-lib.js'],
    dest: 'dist/<%= pkg.name %>.js',
    options: {
      banner: ";(function( window, undefined ){ \n 'use strict';",
      footer: "}( window ));"
    }
  }
}

    Meiner Meinung nach, ist dies mehr wartbar und ermöglicht templating mit anderen Eigenschaften definiert, die in Ihrer Gruntfile.

    • Einverstanden, das ist weit besser als jede andere option-und da ist die offizielle Grunzen release, können Sie sicher sein, dass das plugin gepflegt werden.
    InformationsquelleAutor briangonzalez
  3. 2

    Will einfach hinzufügen @elclanrs Antwort, dass, wenn Sie wollen in der Lage sein, um Ihre Module in separaten Dateien erleichtert das debugging während der Entwicklung, Sie würde sich natürlich einwickeln von Ihnen mit intro.js und outro.js als gut. Mit dem built-in concat Aufgabe, die Sie haben würde, etwas zu schreiben wie:

    concat: {
  events_debug: { //wrap the 'events' module in IIFE
    src: [
      'js/src/intro.js',
      'js/src/events.js',
      'js/src/outro.js'
    ],
    dest: 'js/out/events.js'
  },
  callbacks_debug: { //wrap the 'callbacks' module in IIFE
    src: [
      'js/src/intro.js',
      'js/src/callbacks.js',
      'js/src/outro.js'
    ],
    dest: 'js/out/callbacks.js'
  }

  //zzZZZ...
}

    Was sehr mühsam ist und selbst-Wiederholung. Vielleicht möchten Sie möglicherweise erstellen Sie eine benutzerdefinierte Aufgabe für Masse-wrapping-Dateien, wie z.B.

    wrap: {
    html: {
        intro: 'partials/intro.js',
        outro: 'partials/outro.js',
        src: 'js/*.js',
        dest: 'out' //output directory
    }
}

    Es wurde eine Frage über das kürzlich, siehe diesen thread:

    Mit grunt concat, wie kann ich das automatisieren der Verkettung der gleichen Datei in vielen anderen Dateien?

    • Danke @Dmitri, ich glaube, ich bin zu langsam, wie das funktioniert, es ist nicht sehr geradlinig. Es macht mich Frage mich, ob es mehr Sinn macht zu schreiben, jedes Modul verpackt in einer iife, und dann einen grunt-task, der Streifen der wrapper. Wie vielleicht entzieht es alles vor ein //<--intro und alles nach einem //outro-->...?
    • ...Ich denke, das tun "wrap" statt "Auspacken" hält sich besser zu "TROCKEN"
    • Es ist bis zu Ihnen 🙂 natürlich verketten, ist einfacher und sicherer und schneller als Strippen ein Muster. Aber auf der anderen Seite, bin ich nicht sicher, ob ich gerne meine source-Dateien hängt von der build-tool (D. H. die Module sind nicht mehr tragbar, weil Sie nicht arbeiten, ohne eingehüllt in IIFE. Auf der gegenüberliegenden, müssen Sie manuell strip-IIFE von einem externen Module, die Sie in Ihrem Projekt). Also gute überlegungen...
    • Ja, das build-tool ist groß und alle, aber wenn es kommt, um zu Debuggen, es gibt nichts wie nur den guten alten cmd+shift+r 🙂 Aber ich sehe nicht ein, warum würden Sie haben, um Streifen der iife von 3rd-party-Module...?
    • Sie könnten dies tun wollen, wenn Sie wollen, um ein add 3rd-party-Module, die eine große Datei parallel verketteten code
    InformationsquelleAutor Dmitry Pashkevich
  4. 1

    Ich würde Ihnen empfehlen, meine grunt-plugin grunt-concat-deps da es automatisch behebt, Ihre Module unabhängig von Ihrer Architektur.

    PLUS: Sie brauchen keine explizite Modul-Konfiguration für das plugin, wie es stützt sich auf deklarative und dezentrale module-definition in einer YUIDoc Stil.

    Finden Sie hier weitere Informationen: https://github.com/leoselig/grunt-concat-deps

    InformationsquelleAutor Leo Selig
Schreibe einen Kommentar