bower init - Unterschied zwischen amd, es6, globals und node

291

Ich erstelle meine erste Bower-Komponente. Nach dem Ausführen bower initdes Skripts werde ich gefragt, welche Modultypen dieses Paket verfügbar macht. mit diesen Optionen:

  • amd
  • es6
  • Globale
  • Knoten

Was ist der Unterschied zwischen diesen Optionen?

node.js ecmascript-6 bower js-amd es2015 Pherris
quelle

Antworten:

121

Wenn Sie es nicht wissen, ist es sehr wahrscheinlich, dass Globals die richtige Antwort für Sie ist.

In jedem Fall müssen Sie verstehen:

[AKTUALISIEREN]

Diese Funktion wurde erst kürzlich in Bower eingeführt und ist noch gar nicht dokumentiert (AFAIK). Es beschreibt im Wesentlichen moduleType, welche Zustände für welche Modultechnologie das Paket verbrauchen soll (siehe oben).

Im Moment hat es keine Auswirkung außer dem Festlegen der moduleTypeEigenschaft in der bower.jsonDatei des Pakets.

Die ursprüngliche Pull-Anfrage finden Sie unter https://github.com/bower/bower/pull/934 .

[UPDATE # 2]

Ein paar zusätzliche Punkte, um Kommentare zu beantworten:

  • Derzeit wird auf dem moduleTypeGrundstück AFAIK keine Validierung durchgeführt. Dies bedeutet, dass Personen technisch den Wert verwenden dürfen, den sie für das Grundstück wünschen, auch angularjswenn sie dazu geneigt sind
  • Das Laubkomitee scheint nicht daran interessiert zu sein, zusätzliche non-interoperable/proprietary moduleTypesElemente aufzunehmen (denken Sie an Komponisten, Winkel usw.) - was leicht verständlich ist, aber nichts hindert die Menschen wirklich daran, den moduleTypegewünschten Wert zu verwenden
  • Eine Ausnahme von der vorherigen ist die (etwas) kürzliche Aufnahme der yui moduleType, so dass "Ausnahmen" zu machen sind, vorausgesetzt, sie sind Teil eines konzertierten Plans

Was würde ich tun, wenn ich ein Paket für einen nicht aufgeführten Paketmanager verfassen und auf bower veröffentlichen würde?

Ich würde ein es6-Modul erstellen und / patch es6-transpiler verwenden, um das benötigte Paketformat auszugeben. Dann würde ich entweder / und:

  • Bitte die Bower-Leute, meine Pakettechnologie als Wahl aufzunehmen (basierend auf der Tatsache, dass sie von es6-transpiler als Ziel unterstützt wird).
  • Veröffentlichen Sie mein Paket, das sowohl die es6-Modulversion als auch die transpilierte XXX-Version enthält, und verwenden Sie es es6alsmoduleType

Haftungsausschluss: Ich habe keine praktische Erfahrung mit der Erstellung von AngularJS-Modulen.

Verstümmelter Deutz
quelle
4
Wäre Globals die richtige Antwort für die Erstellung eines AngularJS-Moduls / -Pakets?
1
Ich habe meinen Beitrag mit zusätzlichen Gedanken zu der Frage "Was tun mit nicht unterstützten Paketmanagern?" Aktualisiert. Auch dieses Feld ist derzeit nicht obligatorisch oder wird für nichts verwendet. Sein Wert ist nur informativ. An angularjssich könnte ich globalsja verwenden, aber mein Update lesen. Hoffentlich hilft das.
Verstümmelt Deutz
Ich benutze Knoten. Bedeutet das, dass ich Knotenmodule verfügbar mache? Ich verwende auch Angular, was ich mit bower installiert habe, als ich bemerkte, dass ich eine Meldung erhielt, dass ich "Keine bower.json-Datei zum Speichern habe, benutze bower init, um eine zu erstellen". (Oder wenn dies eine separate Frage ist, kann ich eine Frage schreiben. Ich dachte, dies wäre vielleicht ein angemessener Kommentar, da er sich auf Ihre Antwort bezieht. Danke!)
PrairieProf
27

Initiale

Ich benutze auch bower initzum ersten Mal.

Die Optionen sollten sich auf die verschiedenen Möglichkeiten beziehen, JavaScript-Code zu modularisieren:

  • amd: mit AMD define, wie requirejs.
  • Knoten: Verwendung Node.js require.
  • Globals: Verwenden eines JavaScript-Modulmusters zum Offenlegen einer globalen Variablen (wie window.JQuery).
  • es6: Verwenden der kommenden EcmaScript6-Modulfunktion.

In meinem Fall habe ich einen Node.js-Modul- Dflow geschrieben, aber ich verwende browserify, um eine dist / dflow.js- Datei zu erstellen , die eine globale Dflow- Variable exportiert : Also habe ich Globals ausgewählt .

Andere Updates

Die I - Befehl verwendet , um browserify DFlow als Fenster globales Objekt war

browserify -s dflow -e index.js -o dist/dflow.js

Habe ich es , weil ich es vorziehen , zu verwenden erfordern auch innerhalb des Browsers, so dass ich jetzt bin mit

browserify -r ./index.js:dflow -o dist/dflow.js

und so habe ich den bower.moduleType in meiner bower.json- Datei in node geändert .

Die Hauptmotivation war , dass , wenn mein Modulname einen Bindestrich, zum Beispiel meines Projekt hat Flow-Ansicht , ich muß camelize die globalen Namen in Flowview .

Dieser neue Ansatz hat zwei weitere Vorteile:

  1. Knoten und Browser-Oberfläche sind identisch. Wenn Sie require sowohl auf der Client- als auch auf der Serverseite verwenden, lassen Sie mich die Codebeispiele nur einmal schreiben und sie in beiden Kontexten problemlos wiederverwenden.
  2. Ich verwende npm-Skripte und kann so die Vorteile von ${npm_package_name}Variablen nutzen und einmal das Skript schreiben, mit dem ich browserifiziere.

Dies ist ein weiteres Thema, aber es lohnt sich wirklich zu überlegen, wie nützlich letzterer Vorteil ist: Lassen Sie mich das npm.scripts.browserifyAttribut teilen, das ich in meiner package.json verwende

"browserify": "browserify -r ./index.js:${npm_package_name} -o dist/${npm_package_name}.js"

Gianluca Casati
quelle
1
Sie können tatsächlich erfordern innerhalb von definieren, zum Beispiel: define(function(require, exports, module) { "use strict"; module.exports = { Collection: require("./collection"), View: require('./view') }; });
Doron Segal
7

Nur als Referenz, genau das spezifiziert Bower in Bezug auf die Modultypen:

Der in der mainJavaScript-Datei definierte Modultyp . Kann eine oder ein Array der folgenden Zeichenfolgen sein:

  • globals: JavaScript-Modul, das mithilfe von window.namespaceoder this.namespaceSyntax zum globalen Namespace hinzugefügt wird
  • amd: Mit AMD kompatibles JavaScript-Modul wie RequireJS mit define()Syntax
  • node: JavaScript - Modul mit kompatibelem Knoten und Commonjs Verwendung module.exportsSyntax
  • es6: JavaScript - Moduls mit kompatibelem ECMAScript 6 Module , verwendet exportund importSyntax
  • yui: JavaScript-Modul, das mit YUI-Modulen kompatibel ist und YUI.add()Syntax verwendet

Relevanter Link: https://github.com/bower/spec/blob/master/json.md#moduletype

Wtower
quelle