bower init - differenza tra amd, es6, globali e nodo

291

Sto creando il mio primo componente Bower. Dopo aver eseguito bower initlo script mi chiede "quali tipi di moduli espone questo pacchetto?" con queste opzioni:

amd
ES6
globali
nodo

qual è la differenza tra queste opzioni?

— pherris
fonte

121

Se non lo sai, è molto probabile che i globi siano la risposta giusta per te.

Ad ogni modo, devi capire:

[AGGIORNARE]

Questa funzione è stata introdotta di recente in Bower e non è ancora documentata (AFAIK). Descrive essenzialmente il moduleType, che indica per quale tecnologia del modulo il pacchetto deve essere consumato (vedi sopra).

In questo momento, non ha alcun effetto a parte l'impostazione della moduleTypeproprietà inbower.json file del pacchetto.

Vedi https://github.com/bower/bower/pull/934 per la richiesta pull originale.

[AGGIORNAMENTO # 2]

Alcuni punti aggiuntivi, per rispondere ai commenti:

in questo momento AFAIK non è stata effettuata alcuna convalida sulla moduleTypeproprietà, il che significa che le persone sono tecnicamente autorizzate a utilizzare tutto il valore che desiderano, inclusoangularjs se si sentono inclini a farlo
il comitato del pergolato sembra non essere interessato all'inclusione di ulteriori non-interoperable/proprietary moduleTypes(pensa compositore, angolare, ecc.) - il che è facilmente comprensibile, ma ancora una volta, nulla impedisce davvero alle persone di usare ilmoduleType valore che desiderano
un'eccezione alla precedente è l'inclusione (piuttosto) recente della yui moduleType, quindi, ci sono "eccezioni" da fare, supponendo che facciano parte di un piano concordato

Cosa farei se dovessi creare un pacchetto per un gestore di pacchetti non elencato e pubblicarlo su Bower?

Vorrei creare un modulo es6 e usare / patch es6-transpiler per produrre il formato del pacchetto di cui ho bisogno. Quindi vorrei / e:

chiedi ai ragazzi del pergolato di includere la mia tecnologia di pacchetto come scelta (in base al fatto che è supportato da es6-transpiler come obiettivo)
pubblica il mio pacchetto includendo sia la versione del modulo es6 che la versione XXX traspilata, e usalo es6come amoduleType

Disclaimer: non ho esperienza di vita reale nella creazione di moduli angularjs.

— Manuted Deutz
fonte

4

i globi sarebbero la risposta giusta per creare un modulo / pacchetto AngularJS?

1

Ho aggiornato il mio post con ulteriori riflessioni sulla domanda "cosa fare con i gestori di pacchetti non supportati" - ancora una volta, questo campo non è obbligatorio o utilizzato per nulla in questo momento - il suo valore è solo informativo. Quanto angularjsa se stesso, potrei usare globals, sì, ma leggi il mio aggiornamento. Spero che aiuti.

— Manuted Deutz

Sto usando il nodo. Significa che sto esponendo moduli di nodo? Sto anche usando angolare, che era quello che stavo installando usando bower quando ho notato che avevo un messaggio che mi diceva che non avevo "nessun file bower.json per salvare, usa bower init per crearne uno". (Oppure, se questa è una domanda separata, posso scrivere una domanda. Ho pensato che forse fosse un commento appropriato da inserire qui poiché si riferisce alla tua risposta. Grazie!)

— PrairieProf

27

Iniziale

Sto usando anche bower initper la prima volta.

Le opzioni dovrebbero fare riferimento ai diversi modi per modulare un codice JavaScript:

amd: usando AMD define, come requirejs.
nodo: usando Node.js require.
globals: usando il pattern del modulo JavaScript per esporre una variabile globale (come window.JQuery).
es6: utilizzando la prossima funzione del modulo EcmaScript6.

Nel mio caso ho scritto un dflow del modulo Node.js ma sto usando browserify per creare un dist / dflow.js file che esporta un dflow globale var: quindi ho selezionato i globali .

Altri aggiornamenti

Il comando che ho usato per browserify dflow come a oggetto globale della finestra era

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

L'ho cambiato perché preferisco usare richiedi anche all'interno del browser, quindi ora sto usando

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

e così ho cambiato bower.moduleType in nodo nel mio file bower.json .

La motivazione principale è che se il nome del mio modulo ha un trattino, ad esempio la vista del flusso del mio progetto , devo camelizzare il nome globale in flowView .

Questo nuovo approccio ha altri due vantaggi:

Il nodo e l'interfaccia del browser sono uguali. Utilizzando richiedono sia sul lato client che sul lato server, fammi scrivere solo una volta gli esempi di codice e riutilizzarli facilmente in entrambi i contesti.
Uso gli script npm e quindi posso sfruttare la ${npm_package_name}variabile e scrivere una volta lo script che utilizzo per navigare.

Questo è un altro argomento, ma vale davvero la pena considerare quanto sia utile quest'ultimo vantaggio: fammi condividere l' npm.scripts.browserifyattributo che uso nel mio package.json

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

— Gianluca Casati
fonte

1

si può effettivamente utilizzare il comando ask all'interno di define per es:

define(function(require, exports, module) {   "use strict";    module.exports = {     Collection: require("./collection"),     View: require('./view')   }; });

— Doron Segal

7

Solo per riferimento, questo è esattamente ciò che specifica Bower per quanto riguarda i tipi di modulo:

Il tipo di modulo definito nel mainfile JavaScript. Può essere una o una matrice delle seguenti stringhe:

globals: Modulo JavaScript che si aggiunge allo spazio dei nomi globale, usando window.namespaceo this.namespacesintassi

amd: Modulo JavaScript compatibile con AMD, come RequireJS , utilizzando la define()sintassi

node: Modulo JavaScript compatibile con nodo e CommonJS mediante la module.exportssintassi

es6: Modulo JavaScript compatibile con i moduli ECMAScript 6 , utilizzando exporteimport sintassi

yui: Modulo JavaScript compatibile con i moduli YUI , usando la YUI.add()sintassi

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

— Wtower
fonte