uma das coisas que foi introduzida no Angular 6 foi a capacidade de criar e construir bibliotecas com o Angular CLI.

Quando eu usei este recurso pela primeira vez eu fiquei encantado com o quão simples era, como enquanto era tecnicamente possível criar bibliotecas usando versões anteriores de Angular, foi uma experiência totalmente frustrante e triste.

neste artigo, eu lhe mostrarei os principais elementos do desenvolvimento de bibliotecas angulares:

  • casos de uso comum para bibliotecas angulares.
  • criando uma biblioteca usando o CLI Angular.
  • acelerando o desenvolvimento de bibliotecas angulares com link npm.a publicar a sua biblioteca.

o código de demonstração completo para a biblioteca que criamos pode ser encontrado aqui.

casos de Uso para bibliotecas angulares

pela minha experiência, existem 2 casos de uso comum para bibliotecas angulares:

  1. construção de uma biblioteca componente reutilizável para partilha entre aplicações.
  2. A construção da funcionalidade da camada de serviço partilhado-por exemplo. um cliente por trabalhar com uma fonte de dados externa, como uma API.

embora existam muitos casos em que uma biblioteca Angular é um bom ajuste para um projeto, vale a pena considerar se o seu caso de uso é um destes, uma vez que introduz algumas despesas gerais de manutenção. Lembre-se, você sempre pode escrever funcionalidade como parte de um módulo Angular compartilhado dentro de sua aplicação e extraí-lo em uma biblioteca quando necessário.

Criando um projeto de biblioteca Angular

iremos criar uma biblioteca Angular, bem como uma aplicação de demonstração para consumir esta biblioteca. Podemos criá-los com os seguintes comandos:

ng new example-component-library --create-application=falsecd example-component-libraryng generate library example-component-libraryng generate application example-component-library-app

Usando o --create-application=false flag impede Angular de criar uma aplicação com o nome ‘exemplo-componente-biblioteca’, que é o nome que queremos dar à própria biblioteca e não à aplicação de teste, como explicado aqui.

Se agora olharmos para dentro da área de trabalho que acabamos de criar, podemos ver que há uma projects pasta que contém uma sub-pasta para cada biblioteca (exemplo-componente de biblioteca) e a aplicação (exemplo-componente-biblioteca-app) que acabamos de gerar. Há também uma terceira pasta contendo um projeto de teste e2e, que podemos ignorar.

Vamos agora criar a nossa biblioteca e ver o que acontece:

ng build --project=example-component-library

Se a gente olhar na pasta dist, veremos que a nossa biblioteca foi construída e que dentro da pasta de compilação, temos um número de diferentes pastas que contém o aplicativo em vários módulos diferentes formatos adequados para diferentes consumidores, bem como uma pasta contendo Transcrito definições.

  • pacotes-formato do módulo UMD.
  • esm5-module format which uses mostly es5, but also the import/export syntax from es6.
  • esm2015-formato do módulo que utiliza o es2015 / es6.
  • fesm5-versão achatada do esm5.
  • fesm2015 – versão achatada de peerDependencies esm2015.
  • lib – TypeScript definitions for the library.

Este formato é chamado de formato de pacote Angular, e é o formato usado como a saída do ng-packagr, a ferramenta que o CLI Angular usa para transportar bibliotecas.

Estruturação de seu Angulares do projeto de biblioteca

O conteúdo da biblioteca atualmente olhar como este:

Estrutura de Pasta Inicial

Primeiro, exclua o existente example-component-library módulo, componente e serviço de arquivos – nós não precisamos destes.em seguida, adicionaremos um componente, um tubo e uma diretiva. Seguiremos um padrão de adição de um componente por módulo – isso permitirá que uma aplicação consumidora importe apenas os módulos da biblioteca em que está interessada, e então todos os outros módulos sejam agitados em árvore durante o processo de compilação. Eu recomendo muito fazer isso, porque ele realmente vai fazer uma diferença para o tamanho de seus pacotes de aplicação como a biblioteca cresce.

ng generate module components/foong generate component components/foong generate module pipes/barng generate pipe pipes/bar/barng generate module directives/bazng generate directive directives/baz/baz

Depois de fazer esta nossa biblioteca deve ter a seguinte estrutura de pastas:

Estrutura de Pasta de Final

é claro que essa estrutura pode ser ajustada com base no que você ou a sua equipe, de preferência, mas as coisas importantes a ter em mente são:

  • Tem um componente de cada módulo, para permitir uma árvore de agitação de que não serão utilizados módulos/componentes.

    a excepção a este é componentes que são sempre utilizados em conjunto devem ser mantidos no mesmo módulo-eg. Se você estivesse implementando ABS, um TabGroupComponent e TabItemComponent viveriam no mesmo módulo.

  • tente evitar ou limitar usando o barril importações dentro de uma biblioteca Angular

    no Angular 6 Existem problemas com as importações de barril em bibliotecas e a compilação Angular de AOT. Estas questões parecem ser fixadas em Angular 7, mas continuo a deparar-me regularmente com questões confusas devido às importações de barris e, por isso, apoio esta recomendação de utilizar apenas um nível de importações de barris (ou apenas evitá-las inteiramente).

em seguida, deve adicionar cada um dos componentes que criamos para o exports do seu módulo:

import { CommonModule } from '@angular/common';import { FooComponent } from './foo.component';import { NgModule } from '@angular/core';@NgModule({ declarations: , imports: , exports: })export class FooModule { }

Vamos agora atualizar public_api.ts exportar arquivos na biblioteca que queremos expor para um aplicativo de consumo:

/* * Public API Surface of example-component-library */export * from './lib/components/foo/foo.module';export * from './lib/components/foo/foo.component';export * from './lib/pipes/bar/bar.module';export * from './lib/pipes/bar/bar.pipe';export * from './lib/directives/baz/baz.module';export * from './lib/directives/baz/baz.directive';

Agora tudo o que temos a fazer é reconstruir a biblioteca, e ela estará pronta para consumir a biblioteca a partir de uma aplicação.

ng build --project=example-component-library

consumir a nossa biblioteca Angular

durante o desenvolvimento a melhor maneira de consumir a nossa Biblioteca é usando a ligação MPN. Isto permitir-nos-á a ligação simbólica de um directório na pasta de módulos de nós da nossa aplicação de consumo para a aplicação compilada na pasta de dist da biblioteca.

cd dist/example-component-librarynpm link

podemos ligar um projecto Angular a esta biblioteca a partir de qualquer ponto da nossa máquina local. A partir da pasta raiz do projeto:

npm link example-component-library

agora, Se corremos a biblioteca com o relógio bandeira, e ao mesmo tempo executar o ng serve na outra janela de terminal.

ng build --project=example-component-libraryng serve

isto permitir-nos-á desenvolver uma aplicação e (uma ou mais) bibliotecas ligadas simultaneamente, e ver a recompile do aplicativo com cada modificação ao código fonte da biblioteca.

em produção

para produção, vamos publicar a nossa biblioteca para o MPN, e depois tê-la instalada na aplicação usando npm install.

primeiro, você terá que criar uma conta npm. Agora faça login a partir da linha de comando:

npm login

a Partir da pasta raiz do projeto:

cd dist/example-component-librarynpm publish

o Nosso pacote é agora publicado em npm (publicamente), e podemos instalá-lo adicionando-a nossa aplicação package.json dependências e executar o npm install:

"dependencies": { ... "example-component-library": "~0.0.1"}

dependências da Biblioteca

Se a sua biblioteca possui dependências, em seguida, estes devem ser especificados como dependencies ou peerDependenciespackage.json da sua própria biblioteca (e não o package.json na raiz do projeto). Por exemplo, no caso de nossa biblioteca simples, temos apenas as seguintes dependências:

"peerDependencies": { "@angular/common": "^7.1.0", "@angular/core": "^7.1.0"}

Angular é especificado como uma peerDependency ao invés de dependency no fim de evitar que a aplicação consome instalar múltiplos, conflitantes versões Angular. Este artigo tem algumas boas informações sobre peerDependencies e quando usá-las.

conclusão

vimos como podemos criar uma biblioteca de componentes angulares que pode ser consumida por múltiplas aplicações angulares diferentes, bem como como como podemos trabalhar com bibliotecas em desenvolvimento e publicá-las para produção. Abaixo eu listei os recursos que achei úteis para aprender sobre bibliotecas angulares eu mesmo, e para escrever este artigo.

Deixe uma resposta

O seu endereço de email não será publicado.