node.js - manager - yarn facebook



bower init-Unterschied zwischen amd, es6, globals und node (2)

Ich erstelle meine erste Bower-Komponente. Nach dem Start von bower init fragt das Skript, welche Arten von Modulen dieses Paket enthüllt? mit diesen Optionen:

  • Amd
  • es6
  • Globals
  • Knoten

Was ist der Unterschied zwischen diesen Optionen?


Answer #1

Initiale

Ich benutze bower init zum ersten Mal.

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

  • AMD: mit AMD define , wie requirejs.
  • Knoten: Verwenden von Node.js require .
  • globals: JavaScript-Modulmuster verwenden, um eine globale Variable (wie window.JQuery) verfügbar zu machen.
  • es6: Verwendung der bevorstehenden EcmaScript6-Modulfunktion.

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

Andere Aktualisierungen

Der Befehl, den ich verwendet habe, um dflow als globales Fensterobjekt zu dflow war

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

Ich habe es geändert, weil ich es bevorzuge, auch im Browser zu verwenden, also benutze ich jetzt

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

und so änderte ich den bower.moduleType in meine bower.json Datei.

Die Hauptmotivation war, dass, wenn mein Modulname einen Bindestrich hat, zum Beispiel meine Projektflussansicht, ich den globalen Namen in FlowView camelisieren muss .

Dieser neue Ansatz hat zwei weitere Vorteile:

  1. Knoten und Browser-Schnittstelle sind gleich. Mit Require auf der Client-Seite und Server-Seite, lassen Sie mich nur einmal die Codebeispiele schreiben und sie einfach in beiden Kontexten wiederverwenden.
  2. Ich benutze npm-Skripte und so kann ich die ${npm_package_name} und schreibe einmal das Skript, das ich zum Durchsuchen verwende.

Dies ist ein anderes Thema, aber es ist wirklich wert, dass Sie darüber npm.scripts.browserify , wie nützlich letzterer Nutzen ist: Lassen Sie mich das Attribut npm.scripts.browserify teilen, das ich in meinem Paket.json verwende

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


Answer #2

Nur als Referenz, das ist genau das, was Bower bezüglich der Modultypen spezifiziert:

Der Modultyp, der in der JavaScript- main definiert ist. Kann eins oder ein Array der folgenden Strings sein:

  • globals : JavaScript-Modul, das zum globalen Namespace window.namespace , indem window.namespace oder this.namespace Syntax verwendet wird
  • AMD: JavaScript-Modul kompatibel mit AMD, wie RequireJS , mit define() -Syntax
  • node : JavaScript-Modul kompatibel mit node und CommonJS mit module.exports Syntax
  • es6 : JavaScript-Modul, das mit ECMAScript 6-Modulen kompatibel ist und export und import Syntax verwendet
  • yui : JavaScript-Modul kompatibel mit YUI-Modulen , mit YUI.add()

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





es2015