web-dev-qa-db-de.com

Bower Init - Unterschied zwischen AMD, es6, Globals und Node

Ich erstelle meine erste Bower-Komponente. Nach dem Rennen bower init Das Skript fragt mich, welche Arten von Modulen dieses Paket verfügbar macht. mit diesen Optionen:

  • AMD
  • es6
  • globals
  • knoten

was ist der Unterschied zwischen diesen Optionen?

291
pherris

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

In jedem Fall müssen Sie Folgendes verstehen:

[AKTUALISIEREN]

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

Momentan hat es keine Auswirkung außer dem Setzen der Eigenschaft moduleType in der Datei bower.json Des Pakets.

Siehe https://github.com/bower/bower/pull/934 für die ursprüngliche Pull-Anfrage.

[UPDATE # 2]

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

  • aFAIK, derzeit wird für die Eigenschaft moduleType keine Validierung durchgeführt. Das bedeutet, dass die Benutzer technisch den gewünschten Wert verwenden können, einschließlich angularjs, wenn sie dazu geneigt sind
  • das Bower-Komitee scheint nicht daran interessiert zu sein, zusätzliche non-interoperable/proprietary moduleTypes (denken Sie an Komponisten, eckige usw.) einzubeziehen der moduleType Wert, den sie wollen
  • eine Ausnahme zu der vorherigen ist die (etwas) kürzliche Aufnahme von yui moduleType. Es müssen also "Ausnahmen" gemacht werden, vorausgesetzt, es handelt sich um Teil eines abgestimmten 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:

  • petition an die Bower-Leute, meine Pakettechnologie als Auswahl aufzunehmen (basierend auf der Tatsache, dass es von es6-transpiler als Ziel unterstützt wird)
  • veröffentlichen Sie mein Paket, einschließlich der es6-Modulversion und der transpilierten XXX-Version, und verwenden Sie es6 als moduleType

Haftungsausschluss: Ich habe keine Erfahrung mit dem Verfassen von winkligen Modulen.

121
Mangled Deutz

Initiale

Ich benutze bower init auch zum ersten mal.

Die Optionen sollten sich auf die verschiedenen Möglichkeiten zur Modularisierung von JavaScript-Code beziehen:

  • AMD: Verwenden von AMD define wie requirejs.
  • node: using Node.js require.
  • globals: Verwenden des JavaScript-Modulmusters zum Anzeigen einer globalen Variablen (wie window.JQuery).
  • es6: Verwendung der kommenden EcmaScript6-Modulfunktion.

In meinem Fall habe ich ein Node.js-Modul geschrieben dflow , aber ich benutze browserify, um eine dist/dflow.js -Datei zu erstellen, die eine globale dflow var: also habe ich Globals ausgewählt.

Andere Updates

Der Befehl, mit dem ich dflow als window globales Objekt durchsuchte, lautete

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

Ich habe es geändert, weil ich es vorziehe, require auch innerhalb des Browsers zu verwenden, also benutze ich jetzt

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

und so habe ich den bower.moduleType in Knoten in meinem bower.json geändert = Datei.

Die Hauptmotivation war, dass wenn mein Modulname einen Bindestrich hat, zum Beispiel mein Projekt Flussansicht , ich muss camelize den 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 problemlos in beiden Kontexten wiederverwenden.
  2. Ich benutze npm-Skripte und kann daher ${npm_package_name} Variable und schreibe einmal das Skript, das ich zum Browsern verwende.

Dies ist ein anderes Thema, aber es lohnt sich wirklich, darüber nachzudenken, wie nützlich der letztere Vorteil ist: Lassen Sie mich das npm.scripts.browserify Attribut verwende ich in meinem package.json

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

27
Gianluca Casati

Nur als Referenz, dies ist genau das, was Bower in Bezug auf die Modultypen angibt:

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

  • globals: JavaScript-Modul, das den globalen Namespace mit der Syntax window.namespace oder this.namespace erweitert
  • AMD: Mit AMD kompatibles JavaScript-Modul wie RequireJS mit der define() -Syntax
  • node: JavaScript-Modul kompatibel mit node und CommonJS unter Verwendung der Syntax module.exports
  • es6: JavaScript-Modul, das mit ECMAScript 6-Modulen kompatibel ist und die Syntax export und import verwendet
  • yui: JavaScript-Modul, das mit YUI-Modulen kompatibel ist und die YUI.add() -Syntax verwendet

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

7
Wtower