Creación de soluciones con el tipo de componente de biblioteca en SharePoint Framework

Artículo
03/21/2023

En este tutorial, creará un componente de biblioteca de SharePoint Framework (SPFx) y lo usará en un elemento web del lado cliente.

Cómo crear una biblioteca de SPFx de terceros

Cree un directorio de proyecto en su ubicación favorita
```
md corporate-library
```
Vaya al directorio del proyecto
```
cd corporate-library
```
Debe crear un nuevo elemento web ejecutando el generador de Yeoman de SharePoint
```
yo @microsoft/sharepoint
```
En el momento en que se le solicite, introduzca los siguientes valores (seleccione la opción predeterminada para todas las solicitudes que se omiten a continuación):
- ¿Quiere permitir que el administrador de espacios empresariales pueda implementar la solución en todos los sitios inmediatamente sin ejecutar ninguna implementación de características ni agregar aplicaciones en sitios?: Sí
- ¿Cuál es el tipo de componente del lado cliente que se va a crear?: Biblioteca
- ¿Cuál es el nombre de la biblioteca?: BibliotecaCorporativa
- ¿Qué descripción tiene la biblioteca?: Descripción de BibliotecaCorporativa
Una vez que se haya realizado el scaffolding del proyecto, verá la biblioteca creada con un archivo index.ts que contiene una exportación de la CorporateLibrary creada.
Abra la solución en su editor favorito y vaya a src/corporateLibrary/CorporateLibraryLibrary.ts

Observará que se ha creado un método predeterminado: name(). Cambie el nombre de este método de la siguiente manera:

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

Ejecute gulp en el símbolo del sistema para comprobar que todo funciona correctamente.

Cómo consumir una biblioteca de SPFx de terceros (para pruebas locales)

Ejecute gulp bundle --ship desde el directorio raíz de la solución de biblioteca. un simple gulp build no funcionará.
Ejecute npm link desde el directorio raíz de la solución de biblioteca. En este caso, sería desde la carpeta biblioteca-corporativa.
Después de crear el vínculo simbólico al nuevo componente de biblioteca de SPFx, no olvide ejecutar al menos una vez gulp build. Compile el componente de biblioteca al menos una vez para poder importarlo como módulo en un proyecto diferente. Recuerde que el package.json dice que "main": "lib/index.js", por lo tanto, dicha ubicación tiene que existir antes de cualquier intento de importar.
Se creará un vínculo npm local a la biblioteca con el nombre que se proporciona en el package.json.
Cree un proyecto de elementos web en una carpeta de proyecto independiente, que no esté en la estructura de carpetas del proyecto de biblioteca, siguiendo las instrucciones que encontrará aquí. Utilice el nombre CorporateWebPart para el elemento web.
En la raíz de la carpeta del nuevo elemento web, ejecute el comando npm link corporate-library
Se creará un vínculo simbólico a la biblioteca creada localmente en el elemento web y hará que esté disponible para el elemento web.
Abra la solución elemento web en el editor que prefiera y vaya a src/webparts/corporateWebPart/CorporateWebPartWebPart.ts
Agregue una importación para hacer referencia a la biblioteca:
```
import * as myLibrary from 'corporate-library';
```

Cambie el método render() de la manera siguiente:

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 se está creando una nueva instancia de la biblioteca y consulte el método getCurrentTime() para recuperar la cadena de hora actual de la biblioteca.

Pruebe el elemento web iniciando el área de trabajo local y agréguelo a la página:
```
gulp serve
```

Cómo implementar y consumir una biblioteca de SPFx de terceros desde el Catálogo de aplicaciones del espacio empresarial

Vaya a la carpeta raíz de biblioteca-corporativa y agrupe y cree el paquete de la solución:
```
gulp bundle --ship
gulp package-solution --ship
```
Esto compilará los cambios locales realizados y empaquetará la solución en un archivo *.sppkg en la carpeta sharepoint/solution .
Implemente este paquete en el Catálogo de aplicaciones del espacio empresarial y en todo el espacio empresarial marcando la opción Hacer que esta solución esté disponible en todos los sitios de la organización.
Vaya a la carpeta de soluciones del elemento web y abra el archivo package.json.
Agregue una entrada para reflejar la entrada de la biblioteca y su versión en la sección dependencies (puede encontrarla en el archivo package.json de la solución de biblioteca que creó anteriormente) de la siguiente manera:
```
"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"
},
```
Nota:

npm install producirá un error si crea un elemento web y acaba de agregar una referencia a package.json pero no crea una referencia local mediante npm link. Si ha creado un vínculo con npm link y ejecuta npm install, no verá un error durante npm install, pero el vínculo simbólico se eliminará. Si quiere ejecutar npm install tendrá que quitar temporalmente la referencia a la biblioteca corporativa y volver a establecer la referencia ejecutando npm link biblioteca-corporativa y actualizar la referencia en package.json.

Crear el elemento web:

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

Implemente la solución de elemento web en el Catálogo de aplicaciones del espacio empresarial.
Agregue el elemento web que acaba de añadir a una página y observe que automáticamente la biblioteca pasa a estar disponible para las funciones del elemento web.
Al hacer cambios en la biblioteca y al publicarla de nuevo en el Catálogo de aplicaciones, el elemento web se actualizará automáticamente sin necesidad de volver a generarlo o publicarlo.

Cómo desvincular la biblioteca de SPFx

Para desvincular una biblioteca de SPFx que se vinculó durante el desarrollo en su proyecto de SPFx, vaya a la carpeta raíz de proyecto de SPFx y ejecute el comando.

npm unlink corporate-library

Para comprobar la ubicación de la carpeta de la biblioteca de SPFx.

npm ls -g 'corporate-library'

Para quitar el vínculo de NPM local a la biblioteca, vaya a la carpeta raíz de la biblioteca de SPFx y ejecute el comando.

npm unlink

Vea también

Usar el tipo de componente de biblioteca en SharePoint Framework

Compartir a través de