bower init: diferencia entre amd, es6, globals y node

Resuelto pherris asked hace 10 años • 3 respuestas

Estoy creando mi primer componente Bower. Después de ejecutar bower initel script, me pregunta "¿qué tipos de módulos expone este paquete?" con estas opciones:

  • amd
  • es6
  • globales
  • nodo

¿Cuál es la diferencia entre estas opciones?

pherris avatar Mar 27 '14 05:03 pherris
Aceptado

Si no lo sabe, es muy probable que Globals sea la respuesta correcta para usted.

De cualquier manera, debes entender:

  • qué es y por qué AMD
  • ¿Qué es un módulo nodejs?
  • ¿Qué es ecmascript 6 y especialmente los módulos es6?

[ACTUALIZAR]

Esta característica se introdujo muy recientemente en Bower y aún no está documentada en absoluto (AFAIK). Básicamente describe el moduleType, que indica para qué tecnología de módulo debe consumirse el paquete (ver arriba).

En este momento, no tiene ningún efecto aparte de establecer la moduleTypepropiedad en el bower.jsonarchivo del paquete.

Consulte https://github.com/bower/bower/pull/934 para ver la solicitud de extracción original.

[ACTUALIZACIÓN #2]

Algunos puntos adicionales, para responder a los comentarios:

  • En este momento, AFAIK, no se ha realizado ninguna validación en la moduleTypepropiedad, lo que significa que técnicamente las personas pueden usar cualquier valor que quieran, incluso angularjssi se sienten inclinados a hacerlo.
  • El comité Bower parece no estar interesado en la inclusión de elementos adicionales non-interoperable/proprietary moduleTypes(piense en compositor, angular, etc.), lo cual es fácilmente comprensible, pero una vez más, nada impide realmente que las personas utilicen el moduleTypevalor que desean.
  • una excepción a lo anterior es la (algo) reciente inclusión del yui moduleType, por lo que se pueden hacer "excepciones", asumiendo que sean parte de un plan concertado.

¿Qué haría si creara un paquete para un administrador de paquetes que no figura en la lista y lo publicara en Bower?

Crearía un módulo es6 y usaría / patch es6-transpiler para generar el formato de paquete que necesito. Entonces yo haría/y:

  • Solicitar a los chicos de Bower que incluyan la tecnología de mi paquete como una opción (basado en el hecho de que es compatible con es6-transpiler como objetivo)
  • publicar mi paquete, incluida la versión del módulo es6 y la versión XXX transpilada, y utilizarlo es6comomoduleType

Descargo de responsabilidad: no tengo experiencia en la vida real en la creación de módulos angularjs.

Mangled Deutz avatar Mar 27 '2014 09:03 Mangled Deutz

Inicial

Yo bower inittambién lo estoy usando por primera vez.

Las opciones deben hacer referencia a las diferentes formas de modularizar algún código JavaScript:

  • amd: usando AMD define, como requirejs.
  • requirenodo : usando Node.js.
  • globals: uso del patrón de módulo JavaScript para exponer una variable global (como window.JQuery).
  • es6: utilizando la próxima función del módulo EcmaScript6.

En mi caso, escribí un módulo dflow de Node.js pero estoy usando browserify para crear un archivo dist/dflow.js que exporta una var dflow global : así que seleccioné globals .

Otras actualizaciones

El comando que utilicé para explorar dflow como un objeto global de ventana fue

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

Lo cambié porque prefiero usar require también dentro del navegador, así que ahora estoy usando

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

y entonces cambié bower.moduleType a nodo en mi archivo bower.json .

La principal motivación fue que si el nombre de mi módulo tiene un guión, por ejemplo mi proyecto flow-view , necesito camelizar el nombre global en flowView .

Este nuevo enfoque tiene otros dos beneficios:

  1. La interfaz del nodo y del navegador son las mismas. Usando require tanto en el lado del cliente como en el del servidor, permítame escribir solo una vez los ejemplos de código y reutilizarlos fácilmente en ambos contextos.
  2. Utilizo scripts npm y, por lo tanto, puedo aprovechar ${npm_package_name}la variable y escribir una vez el script que uso para navegar.

Este es otro tema, pero realmente vale la pena que consideres la utilidad de este último beneficio: déjame compartir el npm.scripts.browserifyatributo que uso en mi paquete.json .

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

Gianluca Casati avatar Nov 06 '2014 10:11 Gianluca Casati

Sólo como referencia, esto es precisamente lo que Bower especifica con respecto a los tipos de módulos:

El tipo de módulo definido en el mainarchivo JavaScript. Puede ser una o una serie de las siguientes cadenas:

  • globals: Módulo JavaScript que se suma al espacio de nombres global, utilizando la sintaxis window.namespaceothis.namespace
  • amd: Módulo JavaScript compatible con AMD, como RequireJS , usando define()sintaxis
  • node: Módulo JavaScript compatible con node y CommonJS usando module.exportssintaxis
  • es6: Módulo JavaScript compatible con módulos ECMAScript 6 , uso exporty importsintaxis
  • yui: Módulo JavaScript compatible con módulos YUI , usando YUI.add()sintaxis

Enlace relevante: https://github.com/bower/spec/blob/master/json.md#moduletype

Wtower avatar Feb 08 '2016 12:02 Wtower