Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrando do Bower para Yarn #619

Closed
felipepalazzo opened this issue Jul 13, 2017 · 25 comments
Closed

Migrando do Bower para Yarn #619

felipepalazzo opened this issue Jul 13, 2017 · 25 comments

Comments

@felipepalazzo
Copy link

Salve frontendrs ✌️

Contextualizando: tenho um SPA em Angular 1.x que usa Bower para gerenciar dependências e Grunt como task runner. Por tudo o que já foi comentado aqui, estou substituindo o Bower por Yarn.

Temos o wiredep pra injetar JS no index.htm na ordem correta e vi que a comunidade recomenda, no caso de uma aplicação com Yarn/NPM, o uso do Browserify (ou Webpack) e, consequentemente, transformar tudo em modules.

Na prática isso significa colocar require() em todos os services, controllers, etc.

Alguém já passou por essa migração? Alguma outra ideia e/ou sugestão para fazer essa migração de forma mais rápida? (infelizmente não consegui negociar muito tempo pra essa task )

@thulioph
Copy link

thulioph commented Jul 14, 2017

Acredito que não faça muito sentido a substituição pro Yarn. Caso o projeto tenha um package.json, migra tudo do bower pra ele, o yarn entraria pra substituir o npm. Utilizar um module bundler tem um overhead maior, exige a mudança numa série de arquivos pra tudo ficar redondinho e como você aparentemente não tem muito tempo..

Tenta fazer a mudança de forma gradativa, uma coisa de cada vez.

@felipepalazzo
Copy link
Author

felipepalazzo commented Jul 14, 2017

@thulioph valeu pela contribuição. Mas me permita discordar: acredito que faz todo sentido substituir pro Yarn. Sem entrar em maiores detalhes, o próprio pessoal do Bower recomenda essa migração.

Talvez eu não tenha formulado o tópico da melhor forma, mas minha intenção era apenas saber se existe algo análogo ao wiredep para o Yarn.

@WandersonAlves
Copy link

Wiredep não é um plugin pro Grunt / Gulp? (me corrija se eu estiver errado pfv) Acredito que não muda nada você usando o Yarn ou Npm já que quem levanta o wiredep é um task runner. O yarn faz mais do que gerenciar pacotes? Agora fiquei na dúvida 🤔

@adeonir
Copy link

adeonir commented Jul 14, 2017

Eu troquei o Bower pelo Yarn em alguns projetos, mas logo depois larguei o Yarn para ficar somente com NPM. Eu gostava da proposta do Bower pois separava as dependências.

@yanmagale
Copy link

É como o @thulioph disse, a migração mais lógica seria entre npm -> Yarn(que com a atual versão do NPM, não deixa nada a dever para o Yarn). O bower possui um arquivo próprio para gerenciar, já que ele não usa o package.json. Desconheço um caminho mais fácil para esta migração, teria que ser feita gradualmente.

@felipepalazzo
Copy link
Author

@WandersonAlves vc está corretíssimo, o wiredep é um plugin do Grunt. Ele injeta os assets do bower_modules no html automagicamente:

<body>
  <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <!-- endbower -->
</body>

Porém, uma vez que estou removendo o Bower, não há mais o diretório bower_modules - e sim o node_modules.

O suporte ao NPM ainda é uma issue em aberto.

@WandersonAlves
Copy link

Ah, entendi o X da questão agora kkkk

Complicado :(

@caioincau
Copy link

Se fosse no webpack, dava para fazer um alias, não exist algo assim no grunt/gulp?

@felipepalazzo
Copy link
Author

@yanmagale acho que essa migração para o Yarn faz sentido. Se digitar hoje no seu terminal npm install bower vai verificar a seguinte mensagem:

While Bower is maintained, we recommend 
Yarn and Webpack for *new* front-end projects! 
Yarn's advantage is security and reliability, and Webpack's is 
support for both CommonJS and AMD projects. 
Currently there's no migration path, 
but please help to create it: 
https://github.com/bower/bower/issues/2467

@felipepalazzo
Copy link
Author

@icaioincau não quis seguir esse caminho porque minha intenção é eliminar o wiredep. Tudo o que li até o momento vai mais ou menos nesse sentido: https://stackoverflow.com/a/32572109

@felipepalazzo
Copy link
Author

@adeonir algo no Yarn que vc não gostou? Sempre usei o NPM, mas me chamou a atenção a performance e no geral achei os comandos mais "semânticos".

@adeonir
Copy link

adeonir commented Jul 14, 2017

@felipepalazzo não é que não gostei, mas o Yarn faz o mesmo que o NPM, então acaba ficando redundante.

@yanmagale
Copy link

@felipepalazzo esta issue ajuda ajuda? Replate Bower To Yarn

@gchamon
Copy link

gchamon commented Dec 11, 2017

vi que essa issue ainda está em aberto.

aqui conseguimos com sucesso utilizar o Yarn para resolver as dependências. Usamos o gulp e tivemos que atualizar do V3 para V4 para o Glob seguir corretamente os symlinks gerados pelo bower-away. Algumas dependências não tem suas versões resolvidas automaticamente por algum motivo, de modo que um novo yarn install falha e para tanto foi necessário modificar na mão o yarn.lock para adicionar os campos de version corretamente e utilizar postinstall scripts para rodar o yarn numa pasta separada para as dependências do bower com a flag --pure-lockfile para congelar o arquivo.

Mas no fim do dia o build e serve estão funcionando corretamente com pacotes resolvidos pelo Yarn e empacotados com o wiredep.

@Instrumedley
Copy link

atualmente eu utilizo o Grunt juntamente com Bower, e desde alguns meses pra cá começamos a ter problemas instalando novos pacotes com o bower, até perceber que o Bower já não é mais uma boa escolha para gerenciar pacotes.

Utilizando o bower-away eu consegui com sucesso criar meu package.json com os meus pacotes do bower e enviá-los pro folder node_modules/@bower_components

O problema é que eu recebo um monte de erros ao tentar usar npm install, provavelmente porque alguns dos meus pacotes não conseguem ser encontrados pelo npm ou o versionamento deles entre bower e npm são diferentes.
Outro problema é o wiredep em meu grunt mencionado aqui anteriormente

Sinceramente, eu não sou muito familiar com essas tecnologias e esta sendo uma dor de cabeça me livrar do bower que a solução no momento está sendo mantê-lo. Se algum tiver alguma dica ou solução e puder compartilhar. Versionar os pacotes na mão no package.json não é uma solução viável pra mim, já que meu projeto é muito complexo e há muitos pacotes .

@gchamon
Copy link

gchamon commented Feb 23, 2018

Npm não lida bem com o package que o bowe-away produz. Instale o yarn pelo Npm e use-o no lugar do npm pra instalar.

Pode ser necessário talvez modificar o yarn-lock pq alguns plugin não tem suas versões corretas capturadas no lock. Veja minha resposta para um pouco mais de informação.

@johnnyasantoss
Copy link

Olá!
Vi esse issue como relacionado ao taptapship/wiredep#234 e só passei para informá-los que fiz um fork do wiredep para usar com o bower-away.

Vale lembrar que a ideia do fork que fiz é para uma migração gradual, e não pretendo mantê-la.
😄

https://github.com/johnnyasantoss/wiredep-away

@angeliski
Copy link

Alguém fez a migração com sucesso?
Hoje eu tenho um problema não com o bower em si, mas com o wiredep. No projeto que eu estou mexendo, é gerado um bundle único, com as dependências, desde jquery, até angular e outras diretivas internas.

O meu problema é o seguinte, no meu arquivo de configuração do Gulp está declarado os arquivos que devem ser concatenados para gerar o bundle, com base no wiredep, então o wiredep resolve todos os arquivos do bower e suas respectivas dependências, retorna eles e ainda concatena outros arquivos (que podem estar no bower, mas não foram resolvidos como o angular-i18n), e no fim ainda é adicionado os arquivos da minha aplicação. Quando eu removo o bower e o wiredep, eu tenho um problema nesse load.
Eu sei que não é bonito, mas uma aplicação antiga, que eu gostaria muito de atualizar.
Eu só enchergo o caminho de declarar manualmente esses arquivos para load, vocês tem alguma forma mais automatizada/fácil de fazer isso?

@gchamon
Copy link

gchamon commented Jun 5, 2018

Ola @angeliski!
Você está tentando se livrar do wiredep? Se sim, você precisará fazer, além da migração do bower pro Yarn, a migração do wiredep pra outro bundler, como o browserify ou webpack. No entanto ambos esperam que as importações sejam manualmente declaradas com import, salvo engano, para que possam construir a árvore de dependência.
A migração para o Yarn, no entanto, independe da migração para o webpack, só que você vai precisar usar o Gulp v4, pelo menos em minha experiência não consegui fazer o Gulp v3 funcionar com o bower-away.
O problema do gulp v4 é que há muito tempo está em Alpha e suas modificações podem quebrar seu workflow (por exemplo, minha biblioteca de funções do Gulp funciona com o Gulp v4-alpha2 mas nao com o alpha3)

@johnnyasantoss
Copy link

Alguém fez a migração com sucesso?

Estou fazendo uma migração em passos usando o meu fork do wiredep (wiredep-away), que comentei acima. Depois de ter todas as dependências sendo resolvidas diretamente do Yarn, moverei o sistema de build do bundle de js para alguma coisa mais atual que tenha um melhor suporte que o gulp e suas extensões hoje (ex: Rollup, WebPack ou até mesmo browserify)

PS: até o momento já migrei todas as dependências para o Yarn e ainda continuo injetando os scripts usando o meu fork do wiredep (que não é lá essas coisas mas quebrou meu galho).

Migrar esses legados é problemático mesmo, mas pode ser muito recompensador.

@angeliski
Copy link

Opa @gchamon Eu quero me livrar do bower e do wiredep, mas eu comecei a ter problemas no wiredep mesmo. O que acontece é que hoje, o wiredep só é usado para resolver as dependências em si, depois o gulp gera um bundle enorme com todas essas dependências. Eu queria um caminho de migrar sem ter que colocar outro bundle (agora pelo menos), mas acho que vou ser obrigado a fazer isso né? :/
@johnnyasantoss Eu até tentei usar o seu fork, mas o meu maior problema é só o wiredep, porque eu consigo mover as minhas depêndencias para o package sem usar o bower-away, mas tenho problemas (porque eu não queria usar um bundle) para resolver essas dependências magicamente como o wiredep fazia.

Aproveitando a deixa, o Srs. conhecem alguma ferramenta que permita testar isso? Ex. Eu tenho meus arquivos gerados com o gulp+bower+wiredep hoje, ai crio um teste que consigo rodar e validar que os arquivos são "identicos" quando tiver só o gulp+webpack?

@johnnyasantoss
Copy link

@angeliski Creio que não tem o pq fugir de um bundler, tendo em vista que bundles carregam mais rápido em conexões antigas (http 1.1), e acabam organizando melhor o seu código para entregá-lo em produção. O seu problema hoje (do meu ponto de vista) é que você está preso a forma como os arquivos do bower são importados para o seu projeto. Creio que seria mais sensato você usar um padrão mais modular usando o require do CommonJS ou o import <algo> from <package> do ES6 para carregar as dependências dos seus arquivos. E usando alguma ferramenta como Browserify para gerar um bundle que entenda os requires e não cause inúmeras requisições no seu servidor e outras dores de cabeça :)

@johnnyasantoss
Copy link

Caso vc use o gulp e não queira mudar muito a sua solução atual, podes usar o gulp-bro que integra na pipeline do gulp transformando os arquivos usando o browserify sem preocupar em usar a API dele.

@angeliski
Copy link

Sem dúvida @johnnyasantoss , meu problema maior é a maneira como os arquivos são importados. Eu queria fazer essa migração por um caminho menos custoso, porque o projeto para colocar webpack ainda está sendo estudado. Mas acho que vou "postergar" essa mudança para fazer junto da entrada do webpack no ecossistema. Muito obrigado pela força!

@DouglasParnoff
Copy link

@felipepalazzo, no fim, conseguiu resolver?
Estou com o mesmo cenário.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests