Front End

18 jun, 2018

Pacotes privados com Yarn Workspaces e Angular CLI

Publicidade

Às vezes, queremos criar pacotes privados para compartilhar entre nossos projetos, mas sem toda aquela entropia de, a cada atualização, ter que fazer todo o processo de publicação de um pacote no NPM. Na minha opinião, a melhor forma de se fazer isso é utilizando Yarn Workspaces e git submodule.

Neste artigo, vou mostrar como podemos fazer isso utilizando um projeto criado com Angular CLI. Imagine que o seguinte módulo será compartilhado entre vários projetos:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@NgModule({
  imports: [CommonModule]
})
export class SharedModule{
}

Uma das partes mais importantes do módulo que vamos compartilhar são as informações no `package.json`. Aqui, nós devemos declarar no mínimo o campo **name** e **version** do pacote.

{
  "name": "shared-module",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/core": "^5.2.9",
    "@angular/common": "^5.2.9"
  }
}

Nesse arquivo também devemos declarar as dependências do nosso módulo, caso ele tenha alguma. As dependências do módulo podem ser do tipo *peerDependencies*, *dependencies* e *devDependencies*.

  • dependencies: são dependências em que o pacote precisa para funcionar corretamente.
  • devDependencies: são dependências que só serão utilizadas em ambiente de desenvolvimento.
  • peerDependencies: são um tipo especial de dependência. Quando declaramos uma dependência desse tipo, estamos dizendo que a aplicação na qual nosso pacote for instalado deverá ter esses pacotes já instalados.

Como no exemplo acima, no qual declaramos que a aplicação deverá ter o @angular/core já instalado.

Feito isso e atualizado nosso repositório git, vamos para nossa aplicação para adicionar o pacote como submódulo. Para fazer isso, executaremos o seguinte comando no root do nosso projeto:

   git submodule add https://link-para-seu-repositor.io/shared-module

Agora que já temos nosso submódulo instalado, precisamos habilitar o yarn.

workspaces e adicionar o shared-module

Para habilitar o yarn workspaces precisamos adicionar os atributos private e workspaces no package.json da aplicação. Já para a importação do shared-module, devemos colocar exatamente o name e version que configuramos no pacote.

{
 "dependencies": {
    ...
   "shared-module": "0.0.1"
 },
  "workspaces": ["packages/*"]
}

Por último, temos que dizer ao Typescript (*tsconfig.json*) que existe código fora do *src* que deverá ser compilado. Para isso, vamos adicionar o parâmetro “include”.

{
 "compilerOptions": {
   ...
 },
 "include": [
   "src/**/*",
   "packages/**/*"
 ]
}

Como estamos mudando o comportamento default, também precisamos adicionar a pasta *src* nesse array de pastas.

Abraço e até a próxima!