Criar soluções com o tipo de componente de biblioteca na Estrutura do SharePoint

Artigo
03/21/2023

Neste tutorial, você criará um componente de biblioteca da Estrutura do SharePoint (SPFx) e o usará em uma Web Part do lado do cliente.

Como criar uma biblioteca SPFx de terceiros

Crie um novo diretório de projeto em seu local favorito
```
md corporate-library
```
Vá para o diretório do projeto
```
cd corporate-library
```
Crie uma nova biblioteca executando o gerador Yeoman do SharePoint.
```
yo @microsoft/sharepoint
```
Quando solicitado, insira os seguintes valores (selecione a opção padrão para todos os avisos omitidos abaixo):
- Deseja permitir ao administrador do inquilino a opção de implantar a solução em todos os sites imediatamente, sem executar nenhuma implantação de recurso ou adicionar aplicativos nos sites?: Sim
- Que tipo de componente do cliente a ser criado?: Library
- Qual é o nome da biblioteca?: CorporateLibrary
- Qual é a descrição da biblioteca?: Descrição do CorporateLibrary
Uma vez que o projeto for estruturado, você verá a biblioteca criada com um arquivo index.ts contendo uma exportação do CorporateLibrary criado.
Abra a solução em seu editor favorito e navegue até src\corporateLibrary\CorporateLibraryLibrary.ts

Você observará que um método padrão, name() foi criado. Renomeie este método da seguinte maneira:

public getCurrentTime(): string {
  return 'The current time as returned from the corporate library is ' + new Date().toTimeString();
}

Execute gulp no prompt de comando para ver se tudo se encaixa bem.

Como consumir uma biblioteca SPFx de terceiros (para teste local)

Executar gulp bundle --ship do diretório raiz da solução de biblioteca. um simples gulp build não funciona.
Executar npm link do diretório raiz da solução de biblioteca. Nesse caso, seria a partir da pasta corporate-library.
Logo após criar o link simbólico para o seu novo componente da biblioteca SPFx, não se esqueça de executar pelo menos uma vez gulp build. Compile o componente da biblioteca pelo menos uma vez para poder importá-lo como um módulo para outro projeto. Lembre-se de que o package.json diz que "main": "lib/index.js", portanto aquela localização deve existir antes de qualquer tentativa deimportação.
Isso criará um link npm local para a biblioteca com o nome que é fornecido nopackage.json.
Crie um projeto de Web Part em uma pasta de projeto separada, portanto, não na estrutura de pastas do projeto da biblioteca, seguindo as instruções vistas aqui. Nomeie sua Web Part CorporateWebPart.
Na raiz da nova pasta da web part, execute o comando npm link corporate-library
Isso criará um link simbólico para essa biblioteca construída localmente na web part e a disponibilizará para sua web part.
Abra a solução de Web Part em seu editor preferido e navegue até src\webparts\corporateWebPart\CorporateWebPartWebPart.ts
Adicione uma importação para se referir à sua biblioteca:
```
import * as myLibrary from 'corporate-library';
```

Alterar o método render() da seguinte maneira:

public render(): void {
  const myInstance = new myLibrary.CorporateLibraryLibrary();

  this.domElement.innerHTML = `
  <div class="${ styles.corporateWebPart }">
      <div class="${ styles.container }">
      <div class="${ styles.row }">
          <div class="${ styles.column }">
          <span class="${ styles.title }">Welcome to SharePoint!</span>
          <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
          <p>${myInstance.getCurrentTime()}</p>
          <a href="https://aka.ms/spfx" class="${ styles.button }">
              <span class="${ styles.label }">Learn more</span>
          </a>
          </div>
      </div>
      </div>
  </div>`;
}

Observe que estamos criando uma nova instância da biblioteca e, em seguida, confira o métodogetCurrentTime() para recuperar a atual cadeia de caracteres de tempo da biblioteca.

Teste sua Web Part iniciando o ambiente de trabalho local e adicionando a Web Part à página:
```
gulp serve
```

Como implantar e consumir uma biblioteca SPFx de terceiros a partir do Catálogo de Aplicativos de locatários

Navegue até a raiz da pasta corporate-library e empacote a solução:
```
gulp bundle --ship
gulp package-solution --ship
```
Isso criará quaisquer alterações locais feitas e empacotará a solução em um arquivo *.sppkg na pasta sharepoint/solution .
Implante esse pacote no Catálogo de Aplicativos do locatário e torne-o amplamente disponível marcando a opção Disponibilizar essa solução para todos os sites da organização.
Navegue até a pasta de solução da Web Part e abra o arquivo package.json.
Adicione uma entrada para refletir a entrada de biblioteca e a versão dela para a seção dependencies (você pode encontrar isso no arquivo package.json da solução de biblioteca criada anteriormente) da seguinte maneira:
```
"dependencies": {
  "corporate-library": "0.0.1", // here we added the reference to the library
  "@microsoft/sp-core-library": "1.9.0",
  "@types/webpack-env": "1.13.1",
  "@types/es6-promise": "0.0.33"
},
```
Observação

npm installlançará um erro se você criar uma Web Part e tiver acabado de adicionar uma referência a package.json e não criar uma referência usando npm link. Se tiver criado um link usandonpm link e executar npm install, você não receberá um erro durante npm install mas o link simbólico será removido. Se você pretende executar npm install, será necessário remover temporariamente a referência para a biblioteca corporativa e restabelecer a referência executando npm link corporate-library e atualizar a referência em package.json.

Crie a Web Part:

gulp bundle --ship
gulp package-solution --ship

Implante a Web Part de solução no Catálogo de Aplicativos do locatário.
Incorpore a Web Part recém-adicionada a uma página e observe que a biblioteca ficará automaticamente disponível para as funções da Web Part.
Fazer qualquer alteração na biblioteca e publicar essa biblioteca no Catálogo de Aplicativos novamente atualizará automaticamente a Web Part sem a necessidade de recriar ou republicar essa Web Part.

Como desvincular a biblioteca SPFx

Para desvincular uma biblioteca SPFx que foi vinculada a um link simbólico durante o desenvolvimento em seu projeto SPFx, navegue até a pasta raiz do projeto SPFx e execute o comando.

npm unlink corporate-library

Para verificar o local da pasta da biblioteca SPFx.

npm ls -g 'corporate-library'

Para remover o link npm local da biblioteca, navegue até a pasta raiz da biblioteca SPFx e execute o comando.

npm unlink

Confira também

Usar o tipo de componente de biblioteca na Estrutura do SharePoint

Compartilhar via