Gerenciando dependências no Front-end

Quando estamos trabalhando no back-end, é comum usarmos algum gerenciador de dependência – alguém aqui, que programa em Java, ainda faz buscas no Google procurando jar’s?
Simplesmente se tornou um padrão usar o Maven para cuidar desses problemas para nós. Só precisamos adicionar o nome e a versão da dependência no pom.xml e a dependência já pode ser usada.
Mas quando se trata de front-end é comum acessarmos o site do jQuery, Bootstrap e alguns outros para fazer download das suas versão mais recente.
Porque no front-end as coisas precisam ser diferentes? Porque não podemos usar um gerenciador de dependências no front-end também?
Na verdade podemos sim…
Para começarmos vamos criar um novo diretório em nosso workspace. Todos os comandos seguintes devem ser executados nesse diretório.
$ mkdir hello-world
$ cd hello-word

NPM

NPM (Node Package Manager) é um gerenciador de dependências Javascript, usado geralmente do lado do servidor – Sim! Javascript do lado do servidor, com NodeJS.
Com ele podemos instalar algumas ferramentas uteis durante do desenvolvimento.
Ele é distrubuído junto com o NodeJS.org, e você pode fazer o download de acordo com o seu SO nessa página.
Após instalar o Node, ele e o NPM estarão disponíveis pela linha de comando.
$ node -v
v0.10.36

$ npm -v
1.4.28
O NPM usa um arquivo chamado package.json para armezar as dependências do projeto (assim como o Maven usa o pom.xml)
Poderíamos cria-lo com um editor de texto, ou por linha de comando – que é bem fácil.
$ npm init
O assistente do NPM irá fazer algumas perguntas, você pode responder ou simplesmente apertar enter para deixar o valor padrão em cada pergunta.
No fim, o assistente mostra o arquivo gerado e pergunta se está tudo certo. Apenas confirme com enter.
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install  --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (showcase)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository: (https://github.com/Falci/showcase.git)
keywords:
author:
license: (ISC)
About to write to c:\workspace\sandbox\showcase\package.json:

{
  "name": "showcase",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/Falci/showcase.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Falci/showcase/issues"
  },
  "homepage": "https://github.com/Falci/showcase"
}


Is this ok? (yes)
Conforme explicado na execução do comando, foi criado um arquivo package.json com as informações básicas do projeto. Cada vez que uma nova dependência for necessária ela deve ser adicionada neste arquivo. Você pode altera-lo manualmente se quiser.

Bower

Diferente do NPM, que é mais focado em back-end (mesmo que Javascript), o Bower é um verdadeiro gerenciador de dependências front-end. Nele encontramos bibliotecas como jQuery, Angular e Boostrap, entre inúmeras outras.
A primeira que precisamos fazer para usar o Bower é insta-lo através do npm:
$ npm install -g bower
O parâmetro -g faz que com a dependência seja instalada como global e possa ser acessada por linha de comando:
$ bower -v
1.3.12
Assim como no NPM, o Bower também possui seu arquivo de configuração, onde ele inclui suas dependências. O processo de criação é o mesmo do NPM:
$ bower init
? name: showcase
? version: 0.0.0
? description:
? main file:
? what types of modules does this package expose?:
? keywords:
? authors: Fernando Falci
? license: MIT
? homepage: https://github.com/Falci/showcase
? set currently installed components as dependencies?: Yes
? add commonly ignored files to ignore list?: Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry?: No

{
  name: 'showcase',
  version: '0.0.0',
  homepage: 'https://github.com/Falci/showcase',
  authors: [
    'Fernando Falci'
  ],
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

? Looks good?: Yes
Semelhante ao NPM, foi criado um arquivo bower.json.
Como primeira dependência, vamos adicionar o Bootstrap ao nosso projeto.
Precisamos adicionar no bower.json uma propriedade dependencies. O arquivo vai ficar parecido com este:
{
  // inicio omitido
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "*"
  }
}
Com isso dizemos ao Bower qual a dependência e versão precisamos. Nesse caso, Bootstrap na versão mais recente (*).
Depois de editar o arquivo, precisamos pedir ao Bower para baixar as dependências:
$ bower install
bower cached        git://github.com/twbs/bootstrap.git#3.3.2
bower validate      3.3.2 against git://github.com/twbs/bootstrap.git#*
bower cached        git://github.com/jquery/jquery.git#2.1.3
bower validate      2.1.3 against git://github.com/jquery/jquery.git#>= 1.9.1
bower install       bootstrap#3.3.2
bower install       jquery#2.1.3

bootstrap#3.3.2 bower_components\bootstrap
└── jquery#2.1.3

jquery#2.1.3 bower_components\jquery
Sim! O Bower baixou o Bootstrap e o jQuery! Isso porque cada artefato que adicionamos pelo Bower tem seu próprio arquivo bower.json com suas dependências. Então como Bootsrap já avisou que precisa do jQuery, ele já foi baixado junto.
Veja que foi criado um diretório bower_components na raiz do projeto, com nossas duas dependências. Repare nos seguintes sub-diretórios:
/bower_components/bootstrap/dist/
/bower_components/jquery/dist/
Estes diretórios contém todos os arquivos que precisamos em nossa aplicação.
Se você está usando alguma ferramenta de versionamento, lembre-se de ignorar o diretório bower_components, pois ele pode ser criado com o comando bower install, apenas precisamos versionar o package.json.
Tembém podemos adicionar uma nova dependência diretamente pela linha de comando, sem a necessidade de editar o arquivo package.json manualmente.
Como exemplo, vamos adicionar o angular como dependência:
$ bower install --save angular
bower cached        git://github.com/angular/bower-angular.git#1.3.15
bower validate      1.3.15 against git://github.com/angular/bower-angular.git#*
bower install       angular#1.3.15

angular#1.3.15 bower_components\angular
O parâmetro –save avisa o Bower que além de baixar a nova dependência ele também deve adicioná-la no arquivo package.json.
Pronto! Agora já sabemos como o Bower funciona e como ele pode nos ajudar no desenvolvimento web.

Por FERNANDO FALCI

Postado em: 27 de abril de 2015

Confira outros artigos do nosso blog

REST não é JSON

21 de agosto de 2017

Bruno Sofiato

[Webinar] Profile de aplicações Java com Oracle Mission Control e Flight Recorder

24 de julho de 2017

Danival Calegari

Criando Mocks de serviços REST com SoapUI

27 de junho de 2017

Monise Costa

JavaScript 6: diferença entre var, let e const

09 de maio de 2017

Otávio Felipe do Prado

Deixe seu comentário