segunda-feira, 19 de fevereiro de 2018

Publicando módulo Angular 4 no NPM

O NPM serve para instalar, compartilhar e distribuir códigos. É um gerenciador de pacotes para JavaScript e também um repositório para compartilhamento de códigos fonte onde temos inúmeros pacotes de códigos reusáveis. Para quem trabalha com o Java, seria uma espécie de Maven para JavaScript.

O NPM é instalado juntamente com o Node.js, que pode ser baixado do seguinte endereço:


Após instalado você pode executar o seguinte comando para ver as versões do Node.js e do NPM respectivamente:

$       node -v
$       npm -v

Mesmo tendo baixado o NPM juntamente com o Node.js, eles são independentes e provavelmente você precisará atualizar sua versão do NPM, para isso use o comando  npm install npm@latest -g.

Depois de instalado o NPM, é preciso criar uma conta caso você não tenha, ou fazer login para poder compartilhar seus pacotes. A criação da conta é bem simples e eles pedem um username, password e e-mail. É necessário a confirmação do e-mail antes de publicar algo caso a conta seja nova. O comando para criar uma conta é:

$       npm adduser

Ao criar a conta ele já loga no NPM. Para efetuar logins posteriores, os mesmos dados são pedidos, e o comando é:

$       npm login

Uma vez tendo usuário e senha e estando logado, devemos entrar no diretório do projeto que queremos compartilhar e prepará-lo para ser compartilhado. Para isso precisamos do ng-packgr. Essa biblioteca vai compilar nosso código para um formato de pacote do Angular. Digite o seguinte comando:

npm install ng-packagr --save-dev

Então crie um novo arquivo chamado ng-package.json na raiz do seu projeto. Insira o seguinte trecho de código nele:

{
    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
    "whitelistedNonPeerDependencies": ["."],
    "lib": {
       "entryFile": "index.ts"
    }
}

A parte marcada de amarelo acima eu adicionei depois de tentar publicar uma atualização em um componente e me deparar com um erro do NPM não permitindo publicar pacotes com dependências, porém o componente não funcionava sem as dependências publicadas. Essa linha adiciona uma "lista branca" de dependências que podem ser publicadas, colocando o ponto (".") eu defini que todas as dependências podem ser publicadas.

    Agora precisamos criar o arquivo que indicamos como arquivo de entrada no “entryFile”. Esse arquivo deve também estar na raiz do seu projeto e no conteúdo precisamos exportar nossos módulos como abaixo:

Export * from “./src/app/caminho_do_seu_modulo/seumodulo.module”

O módulo que for exportado será acessado por quem usar nossa biblioteca. Lembre-se de no decorator exportar os componentes, para que eles possam ser usados fora do módulo, como no exemplo abaixo:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { FormsModule } from '@angular/forms';

import { SeuComponent } from './seu-component.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    BrowserAnimationsModule
  ],
  declarations: [SeuComponente],
  exports: [
    SeuComponente
  ]
})
export class SeuModule { }

Precisamos agora adicionar um novo script no package.json, atualizar a versão do seu projeto e remover a propriedade "private": true. Se você não atualizar a versão a cada vez que for publicar, não será possível uma nova publicação no NPM. Depois de remover a propriedade "private": true, dentro do arquivo procure a propriedade “scripts” e adicione ao final:

“packagr”: “ng-packagr -p ng-package.json”

Agora execute o comando npm run packagr, que irá gerar a dist da nossa biblioteca. Note que foi criada uma pasta dist. Ela é o conteúdo que deve ser publicado.

Por fim, execute os comandos npm pack para gerar um arquivo .tgz com a versão do nosso projeto e o comando: npm publish dist para que possamos publicar a nossa biblioteca no portal npm.


Segue o link de um componente que publiquei no NPM e o fonte no GitHub:










Links de referência:

https://imasters.com.br/desenvolvimento/publicando-modulo-angular-4-no-npm/?trace=1519021197&source=single
https://medium.com/@programadriano/nodejs-criando-um-m%C3%B3dulo-global-e-publicando-no-npm-9bb046a1db4f 
http://clubedosgeeks.com.br/artigos/publicando-pacotes-no-npm

terça-feira, 6 de fevereiro de 2018

Git – Configurando o SSH no Windows e no GitHub

Criar uma chave SSH não é muito complicado. Quando instalamos o Git no Windows, ele já traz uma ferramenta para isso, o OpenSSH.

Então, vamos começar executando o git-bash, um terminal Linux para o Windows que também faz parte da instalação do Git. Após aberto o git-bash, digite:

ssh-keygen -t rsa -b 4096 -C "seu-email@aqui.com"

Você será indagado sobre onde salvar a chave, sendo que o prompt também já mostra um caminho default. Basta pressionar o “Enter” para criar a chave SSH no caminho default. Caso já exista uma chave salva, ele perguntará se deseja sobrescrever. Logo depois, ele pedirá uma senha e a confirmação:

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

Caso não queira informar uma senha, pode apenas confirmar sem digitar nada (é recomendado criar uma senha, claro!). Então o prompt lhe informa que a sua chave privada e a sua chave publica estão no caminho indicado previamente, que se for o default é: C:\Users\seu-usuario\.ssh.

Adicione sua chave SSH ao SSH-Agente:

eval $(ssh-agent -s)
ssh-add ~/.ssh/id_rsa

E por fim, adicione sua chave a sua conta no GitHub, o comando abaixo copia sua chave para a memória e deixa pronto para colar no GitHub:

clip < ~/.ssh/id_rsa.pub

Depois, acesse sua conta no GitHub e vá nas configurações:




Clique em “SSH and GPG keys”.




Clique em “New SSH key”:




Adicione um título para identificação da sua chave (pois você pode ter mais de uma, de diferentes dispositivos) e cole a sua chave SSH, depois, confirme sua senha.




Pronto! 




https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/
http://guides.beanstalkapp.com/version-control/git-on-windows.html