bower init - diferença entre amd, es6, globals e node

291

Estou criando meu primeiro componente Bower. Depois de executar bower inito script, pergunto-me 'que tipos de módulos este pacote expõe?' com estas opções:

  • amd
  • es6
  • globais
  • nó

qual é a diferença entre essas opções?

node.js ecmascript-6 bower js-amd es2015 pherris
fonte

Respostas:

121

Se você não sabe, é bem provável que os globais sejam a resposta certa para você.

De qualquer forma, você precisa entender:

[ATUALIZAR]

Esse recurso foi introduzido muito recentemente no caramanchão e ainda não está documentado (AFAIK). Descreve essencialmente o moduleType, que indica para qual tecnologia de módulo o pacote deve ser consumido (veja acima).

No momento, ele não tem nenhum efeito além de definir a moduleTypepropriedade no bower.jsonarquivo do pacote.

Consulte https://github.com/bower/bower/pull/934 para obter a solicitação de recebimento original.

[ATUALIZAÇÃO # 2]

Alguns pontos adicionais, para responder aos comentários:

  • No momento, o AFAIK não faz validação na moduleTypepropriedade - o que significa que as pessoas têm permissão técnica para usar o valor que desejarem, inclusive angularjsse se sentirem inclinadas a fazê-lo.
  • o comitê do pavilhão parece não gostar da inclusão de outros non-interoperable/proprietary moduleTypes(pense em compositor, angular etc.) - o que é facilmente compreensível, mas, novamente, nada realmente impede as pessoas de usarem o moduleTypevalor que desejam
  • uma exceção à anterior é a inclusão (um tanto) recente das yui moduleType, portanto, existem "exceções" a serem feitas, supondo que elas façam parte de um plano concertado

O que eu faria se fosse o autor de um pacote para um gerenciador de pacotes não listado e o publicasse no bower?

Eu criaria um módulo es6 e usaria / patch es6-transpiler para gerar o formato de pacote necessário. Então eu / /:

  • solicite aos caras do caramanchão que incluam minha tecnologia de pacotes como uma opção (com base no fato de que ela é suportada pelo es6-transpiler como destino)
  • publique meu pacote, incluindo a versão do módulo es6 e a versão transpilada do XXX, e use es6comomoduleType

Isenção de responsabilidade: não tenho experiência na vida real na criação de módulos angularjs.

Deutz Mangled
fonte
4
os globais seriam a resposta certa para a criação de um módulo / pacote AngularJS?
1
Atualizei minha postagem com pensamentos adicionais sobre a pergunta "o que fazer com gerenciadores de pacotes não suportados" - mais uma vez, este campo não é obrigatório ou é usado para qualquer coisa no momento - seu valor é apenas informativo. Quanto a angularjsele, eu poderia usar globalssim, mas ler minha atualização. Espero que ajude.
amigos estão
Eu estou usando nó. Isso significa que estou expondo módulos de nós? Também estou usando angular, que era o que eu estava instalando usando o bower quando notei que tinha uma mensagem dizendo que eu tinha "Nenhum arquivo bower.json para salvar, use o bower init para criar um". (Ou, se essa for uma pergunta separada, eu posso escrever uma pergunta. Pensei que talvez fosse um comentário apropriado a ser colocado aqui, pois se refere à sua resposta. Obrigado!) #
11555
27

Inicial

Também estou usando bower initpela primeira vez.

As opções devem se referir às diferentes maneiras de modularizar algum código JavaScript:

  • amd: usando AMD define, como requirejs.
  • node: usando Node.js require.
  • globals: usando o padrão do módulo JavaScript para expor uma variável global (como window.JQuery).
  • es6: usando o próximo recurso do módulo EcmaScript6.

No meu caso, escrevi um dflow do módulo Node.js., mas estou usando o browserify para criar um arquivo dist / dflow.js que exporta uma var do dflow global : portanto, selecionei globais .

Outras atualizações

O comando que eu usei para procurar o dflow como um objeto global da janela foi

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

Eu mudei porque eu prefiro usar o exigir também dentro do navegador, então agora estou usando

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

e então mudei o bower.moduleType para nó no meu arquivo bower.json .

A principal motivação foi que, se o nome do meu módulo tiver um traço, por exemplo , a visualização do fluxo do meu projeto , eu preciso camelizar o nome global no flowView .

Essa nova abordagem tem dois outros benefícios:

  1. A interface do nó e do navegador é a mesma. Usando o require no lado do cliente e no servidor, deixe-me escrever apenas uma vez os exemplos de código e reutilizá-los facilmente nos dois contextos.
  2. Eu uso scripts npm e, portanto, posso tirar proveito da ${npm_package_name}variável e escrever assim que o script usado para navegar.

Este é outro tópico, mas vale a pena considerar como é útil o último benefício: deixe-me compartilhar o npm.scripts.browserifyatributo que uso no meu package.json

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

Gianluca Casati
fonte
1
você pode realmente usar exigem dentro de definir para ex: define(function(require, exports, module) { "use strict"; module.exports = { Collection: require("./collection"), View: require('./view') }; });
Doron Segal
7

Apenas para referência, é exatamente isso que o caramanchão especifica em relação aos tipos de módulos:

O tipo de módulo definido no mainarquivo JavaScript. Pode ser uma ou uma matriz das seguintes seqüências de caracteres:

  • globals: Módulo JavaScript que adiciona ao namespace global, usando window.namespaceou this.namespacesintaxe
  • amd: Módulo JavaScript compatível com AMD, como RequireJS , usando define()sintaxe
  • node: Módulo JavaScript compatível com nó e CommonJS usando module.exportssintaxe
  • es6: Módulo JavaScript compatível com os módulos ECMAScript 6 , usando exporte importsintaxe
  • yui: Módulo JavaScript compatível com os módulos YUI , usando YUI.add()sintaxe

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

Wtower
fonte