bower init - différence entre amd, es6, globals et node

291

Je crée mon premier composant Bower. Après avoir exécuté bower initle script, il me demande "quels types de modules ce package expose-t-il?" avec ces options:

  • amd
  • es6
  • globals
  • nœud

quelle est la différence entre ces options?

node.js ecmascript-6 bower js-amd es2015 pherris
la source

Réponses:

121

Si vous ne le savez pas, il est fort probable que global soit la bonne réponse pour vous.

Quoi qu'il en soit, vous devez comprendre:

[METTRE À JOUR]

Cette fonctionnalité a été introduite très récemment dans Bower et n'est pas encore documentée (AFAIK). Il décrit essentiellement le moduleType, qui indique pour quelle technologie de module le package est destiné à être consommé (voir ci-dessus).

À l'heure actuelle, cela n'a aucun effet en dehors de la définition de la moduleTypepropriété dans le bower.jsonfichier du package.

Voir https://github.com/bower/bower/pull/934 pour la demande de traction d'origine.

[MISE À JOUR # 2]

Quelques points supplémentaires, pour répondre aux commentaires:

  • en ce moment AFAIK il n'y a pas de validation effectuée sur la moduleTypepropriété - ce qui signifie que les gens sont techniquement autorisés à utiliser la valeur qu'ils souhaitent pour cela, y compris angularjss'ils se sentent enclins à le faire
  • le comité Bower ne semble pas être favorable à l'inclusion de plus non-interoperable/proprietary moduleTypes(pensez compositeur, angulaire, etc.) - ce qui est facilement compréhensible, mais encore une fois, rien n'empêche vraiment les gens d'utiliser la moduleTypevaleur qu'ils souhaitent
  • une exception à la précédente est l'inclusion (quelque peu) récente du yui moduleType, donc, il y a des "exceptions" à faire, en supposant qu'elles font partie d'un plan concerté

Que ferais-je si je devais créer un package pour un gestionnaire de packages non répertorié et le publier sur bower?

Je voudrais créer un module es6 et utiliser / patch es6-transpiler pour sortir le format de package dont j'ai besoin. Alors je voudrais soit / et:

  • Pétitionner les gars de Bower pour inclure ma technologie de package comme choix (basé sur le fait qu'il est pris en charge par es6-transpiler comme cible)
  • publier mon package, y compris la version du module es6 et la version transpilée de XXX, et l'utiliser es6commemoduleType

Avertissement: je n'ai pas d'expérience réelle dans la création de modules angularjs.

Mangled Deutz
la source
4
les globaux seraient-ils la bonne réponse pour créer un module / package AngularJS?
1
J'ai mis à jour mon message avec des réflexions supplémentaires sur la question "Que faire avec les gestionnaires de paquets non pris en charge" - encore une fois, ce champ n'est pas obligatoire ou utilisé pour rien pour le moment - sa valeur est informative uniquement. Quant angularjsà lui-même, je pourrais utiliser globals, oui, mais lisez ma mise à jour. J'espère que cela pourra aider.
Mangled Deutz
J'utilise node. Est-ce à dire que j'expose des modules de nœuds? J'utilise également angular, qui était ce que j'installais en utilisant bower lorsque j'ai remarqué que j'avais un message me disant que je n'avais "aucun fichier bower.json pour enregistrer, utilisez bower init pour en créer un". (Ou, s'il s'agit d'une question distincte, je peux écrire une question. Je pensais que c'était peut-être un commentaire approprié à mettre ici car il se rapporte à votre réponse. Merci!)
PrairieProf
27

Initiale

J'utilise aussi bower initpour la première fois.

Les options doivent faire référence aux différentes façons de modulariser du code JavaScript:

  • amd: utiliser AMD define, comme requirejs.
  • noeud: en utilisant Node.js require.
  • globals: utilisation du modèle de module JavaScript pour exposer une variable globale (comme window.JQuery).
  • es6: utilisation de la prochaine fonctionnalité du module EcmaScript6.

Dans mon cas, j'ai écrit un dflow de module Node.js mais j'utilise browserify pour créer un fichier dist / dflow.js qui exporte une var globale de dflow : j'ai donc sélectionné des globaux .

Autres mises à jour

La commande que j'ai utilisée pour explorer dflow en tant qu'objet global de fenêtre était

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

Je l'ai changé car je préfère utiliser require également dans le navigateur, donc maintenant j'utilise

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

et j'ai donc changé le bower.moduleType en nœud dans mon fichier bower.json .

La principale motivation était que si le nom de mon module avait un tiret, par exemple la vue de flux de mon projet , je devais caméliser le nom global dans flowView .

Cette nouvelle approche présente deux autres avantages:

  1. Le nœud et l'interface du navigateur sont identiques. En utilisant require à la fois côté client et côté serveur, permettez-moi d'écrire une seule fois les exemples de code et de les réutiliser facilement dans les deux contextes.
  2. J'utilise des scripts npm et ainsi, je peux profiter de la ${npm_package_name}variable et écrire une fois le script que j'utilise pour naviguer.

Ceci est un autre sujet, mais il vaut vraiment la peine de considérer l'utilité de ce dernier avantage: permettez-moi de partager l' npm.scripts.browserifyattribut que j'utilise dans mon package.json

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

Gianluca Casati
la source
1
vous pouvez réellement utiliser require inside of define for ex: define(function(require, exports, module) { "use strict"; module.exports = { Collection: require("./collection"), View: require('./view') }; });
Doron Segal
7

Juste pour référence, c'est précisément ce que bower spécifie concernant les types de modules:

Type de module défini dans le mainfichier JavaScript. Peut être une ou un tableau des chaînes suivantes:

  • globals: Module JavaScript qui ajoute à l'espace de noms global, en utilisant window.namespaceou la this.namespacesyntaxe
  • amd: Module JavaScript compatible avec AMD, comme RequireJS , utilisant la define()syntaxe
  • node: Module JavaScript compatible avec node et CommonJS utilisant la module.exportssyntaxe
  • es6: Module JavaScript compatible avec les modules ECMAScript 6 , utilisation exportet importsyntaxe
  • yui: Module JavaScript compatible avec les modules YUI , utilisant la YUI.add()syntaxe

Lien pertinent: https://github.com/bower/spec/blob/master/json.md#moduletype

Wtower
la source