Criar plataformas web é uma tarefa muitas vezes repetitiva, assim se analisarmos os projetos verificamos que existem muitas bibliotecas de código que se repetem.

Existe uma forma de adicionar ao projeto essas bibliotecas e de as instalar automaticamente. Poderá, de igual forma, definir a versão específica de cada uma ou usar sempre a versão mais recente. Já pensou o tempo que poupava?

Atualmente existem diversas formas de automatizar o desenvolvimento web, usando gestores de dependências, como por exemplo, o NPM, um dos mais populares na comunidade de web developers.

O NPM é o acrônimo de Node Package Manager (Gestor de Pacotes do Node).
O NPM para além de um repositório online de código open source em javascript, é uma ferramenta de linha de comando que interage com este repositório. O objectivo é a instalação local de módulos, gerir versões e dependências, tornando o desenvolvimento mais rápido.

 

Como utilizar o NPM:
 

Instalação

Antes de tudo, por ser uma ferramenta em node, será necessário instalar o Node.js.

Após a instalação, abre a sua linha de comandos e verifica a versão instalada do Node, com o seguinte comando:

node -v v11.13.0

 

O Node, traz também o gestor de pacotes NPM. Para saber a versão a usar, siga o comando:

npm -v 6.9.0

 

Iniciar o gestor de pacotes (package)

Após a instalação teremos que criar o arquivo que armazenará as dependências adicionadas ao projeto. Para isso, na linha de comando, escreve a seguinte instrução:

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

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

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

Press ^C at any time to quit.
critec version: (1.0.0) description: this is a test entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to C:\Users\User\critec\package.json:

{
"name": "critec",
"version": "1.0.0",
"description": "this is a test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

yes

 

Após o preenchimento obteremos o package.json, arquivo que servirá como registo de dependências e as suas versões.

Para adicionar as dependências, poderá consultar o repositório para saber quais os módulos existentes. Para saber o nome do módulo da instalação é simples, basta escrever a seguinte instrução na linha de comando:

npm install nome_do_modulo

 

Caso pretenda definir a versão deverá adicionar “@” à frente do nome juntamente com o número da versão, desta forma:

npm i nome_do_modulo@1.0.0

 

Caso pretenda remover dependências, deverá escrever a seguinte instrução:

npm uninstall nome_do_modulo

 

Depois de configurar todas as dependências, poderá usufruir da mais valia do npm, a portabilidade e rapidez de desenvolvimento. Agora quando iniciar o seu novo projeto basta copiar o package.json e escrever a seguinte instrução na linha de comando:

npm i

 

Após correr esta instrução é criada uma pasta node_modules na pasta de projeto onde constará todas as dependências adicionadas ao package.json. Desta forma, sempre que iniciar um novo projecto conseguirá, de maneira rápida, obter as dependências mais atuais existentes no repositório, de forma automática. Agora que já tem as dependências todas do seu lado, basta chamá-las no seu projeto.

 

Avançado
 

O NPM, não tem apenas a utilidade de instalar módulos, permite executar também instruções ou conjuntos de instruções através de uma comando criado por si conforme a sua necessidade. Para isso basta editar o ficheiro package.json e criar o seu próprio script.

{
"scripts": {
"your_script_name": "eco some_command_here"
}
}

Para executar o comando criado, por se tratar de um comando não predefinido do npm, deverá escrever “run” antes do nome da script criada, conforme o seguinte exemplo:

npm run your_script_name

 

O NPM possui também dois prefixos globais, o “pre” e o “post”:
- “pre” é executado antes da instrução principal;
- “post” depois;

Por exemplo com o comando “npm i” podemos correr três script de forma direta, basta adicionarmos o script no package para “preinstall” e para o “postinstall”.

 

Dica:

Caso faça sites sem nenhuma framework atual (que compila todo o código), poderá de forma automática copiar os ficheiros necessários para a pasta do seu projeto de forma automática. No fim, basta apagar a pasta node_modules e adicionar o script “postinstall” ao seu package:

"postinstall": "mkdirp //project/css //project/js //project/plugin/js //project/plugin/css && cp -r //project/node_modules/bootstrap/dist/js/bootstrap.min.js //project/js && cp -r //project/node_modules/bootstrap/dist/css/bootstrap.min.css //project/css && cp -r //project/node_modules/jquery/dist/jquery.min.js //project/js && rm -rf ///project/node_modules"

NOTA: Caso utilize o sistema operativo Windows irá necessitar do mkdirp instalado.

Com a instrução anterior, podemos perceber que numa primeira fase o NPM irá instalar as dependências do projeto na pasta node_modules e, de seguida, (“postinstall”) irá criar pastas no nosso projeto e copiar os arquivos para dentro do projeto, por fim, irá remover a pasta node_modules.

Assim com apenas um comando, teremos o nosso projeto pronto a iniciar, com as livrarias mais actuais, de forma automática.

 

Das duas uma, se é programador entendeu 90% do artigo e os 10% ficam esclarecidos com um café na critec com os nossos developers. Se é de outra área e, mero curioso, sabe o que tem a fazer: marcar uma reunião connosco, que os nossos programadores fazem o resto.

quer continuar a ler?
faça o download do artigo completo.

Léo Ferreira

2019-09-11

Critec Logo
creative
agency
critec
Olá,
Em que posso ajudar?