web-dev-qa-db-fra.com

bower init - différence entre AMD, es6, globals et noeud

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

  • DMLA
  • es6
  • globals
  • nœud

quelle est la différence entre ces options?

node.jsecmascript-6bowerjs-amdes2015
291
pherris

Si vous ne le savez pas, il est fort probable que globals soit la bonne solution pour vous.

De toute façon, vous devez comprendre:

[MISE À JOUR]

Cette fonctionnalité a été introduite très récemment dans bower et n’a pas encore été documentée (autant que je sache). Il décrit essentiellement la moduleType, qui indique pour quelle technologie de module le paquet est destiné à être consommé (voir ci-dessus).

Pour l'instant, cela n'a pas d'effet mis à part la définition de la propriété moduleType dans le fichier bower.json du paquet.

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

[MISE À JOUR # 2]

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

  • pour l'instant, autant que je sache, il n'y a pas de validation effectuée sur la propriété moduleType - ce qui signifie que les personnes sont techniquement autorisées à utiliser la valeur de leur choix, y compris angularjs si elles sont enclines à le faire.
  • le comité de la tonnelle semble ne pas vouloir l'inclusion de non-interoperable/proprietary moduleTypes (pense compositeur, angulaire, etc.) supplémentaire - ce qui est facilement compréhensible, mais encore une fois, rien n'empêche vraiment les gens d'utiliser le moduleType valeur qu'ils veulent
  • 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 soient partie d'un plan concerté

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

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

  • demander aux gars de bower d'inclure ma technologie de paquetage en tant que choix (basé sur le fait qu'elle est supportée par es6-transpiler comme cible)
  • publie mon paquet, y compris à la fois la version es6 du module et la version XXX transpilée, et utilise es6 comme moduleType

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

121
Mangled Deutz

Initiale

J'utilise aussi bower init pour la première fois.

Les options doivent faire référence aux différentes manières de modulariser du code JavaScript:

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

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

Autres mises à jour

La commande que j'avais l'habitude d'explorer dflow en tant qu'objet global window était

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

J'ai changé parce que je préfère utiliser require également dans le navigateur, alors maintenant j'utilise

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

et ainsi j'ai changé le bower.moduleType en noeud dans mon fichier bower.json.

La motivation principale était que si mon nom de module a un tiret, par exemple mon projet flow-view , je dois 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 les mêmes. En utilisant require à la fois côté client et côté serveur, laissez-moi n’écrire qu’une fois les exemples de code et les réutiliser facilement dans les deux contextes.
  2. J'utilise des scripts npm et je peux donc profiter de la variable ${npm_package_name} et écrire une fois le script que j'utilise pour naviguer.

C’est un autre sujet, mais il vaut vraiment la peine de considérer l’utilité de ce dernier avantage: laissez-moi partager l’attribut npm.scripts.browserify que j’utilise dans mon package.json

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

27
Gianluca Casati

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

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

  • globals: module JavaScript qui ajoute à l'espace de nom global en utilisant la syntaxe window.namespace ou this.namespace
  • AMD: module JavaScript compatible avec AMD, comme RequireJS , utilisant la syntaxe define()
  • node: module JavaScript compatible avec noeud et CommonJS utilisant la syntaxe module.exports
  • es6: module JavaScript compatible avec modules ECMAScript 6 , utilisant la syntaxe export et import
  • yui: module JavaScript compatible avec modules YUI , à l'aide de la syntaxe YUI.add()

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

7
Wtower