Bibliotecas dependientes (versión preliminar)

[Este tema es documentación preliminar y está sujeto a modificaciones.]

Con las aplicaciones basadas en modelos, puede reutilizar una biblioteca precompilada contenida en otro componente que se carga como dependencia de más de un componente.

No es deseable tener copias de una biblioteca precompilada en varios controles. La reutilización de bibliotecas existentes mejora el rendimiento, especialmente cuando la biblioteca es grande, al reducir el tiempo de carga de todos los componentes que utilizan la biblioteca. La reutilización de bibliotecas también ayuda a reducir la sobrecarga de mantenimiento en los procesos de compilación.

Antes

Después de

Para usar bibliotecas dependientes, necesita:

• Cree un componente de biblioteca que contenga la biblioteca. Este componente puede proporcionar alguna funcionalidad o solo ser un contenedor para la biblioteca.
• Configure otro componente para que dependa de la biblioteca cargada por el componente de biblioteca.

De forma predeterminada, la biblioteca se carga cuando se carga el componente dependiente, pero puede configurarla para que se cargue bajo demanda.

De esta manera, puede mantener la biblioteca de forma independiente en el control de biblioteca y los controles dependientes no necesitan tener una copia de la biblioteca incluida con ellos.

Cómo funciona

Debe agregar datos de configuración a su proyecto de componentes para que el proceso de construcción implemente sus bibliotecas de la manera que desee. Establezca estos datos de configuración agregando o editando los siguientes archivos:

• featureconfig.json
• webpack.config.js
• Editar el esquema del manifiesto para Registrar dependencias

featureconfig.json

Agregue este archivo para anular los indicadores de características predeterminados para un componente sin modificar los archivos generados en la carpeta node_modules.

En la siguiente tabla se describen las banderas de característica establecidas en featureconfig.json:

Nombre.	Description
pcfResourceDependency	Permite que el componente utilice un recurso de biblioteca.
pcfAllowCustomWebpack	Permite que el componente utilice un paquete web personalizado. Esta característica debe estar habilitada para los componentes que definen un recurso de biblioteca.

De forma predeterminada, estos valores son off. Establézcalos en on para reemplazar el predeterminado. Por ejemplo:

{ 
  "pcfAllowCustomWebpack": "on" 
} 

{ 
   "pcfResourceDependency": "on",
   "pcfAllowCustomWebpack": "off" 
} 

webpack.config.js

El proceso de compilación de los componentes utiliza Webpack para agrupar el código y las dependencias en un activo implementable. Para excluir las bibliotecas de esta agrupación, agregue un archivo webpack.config.js a la carpeta raíz del proyecto que especifique el alias de la biblioteca como externals. Más información sobre la opción de configuración de elementos externos de Webpack

Este archivo puede tener el siguiente aspecto cuando el alias de biblioteca es myLib.

/* eslint-disable */ 
"use strict"; 

module.exports = { 
  externals: { 
    "myLib": "myLib" 
  }, 
}  

Registrar dependencias

Use el elemento de dependencia dentro de los recursos del esquema de manifiesto.

<resources>
  <dependency
    type="control"
    name="samples_SampleNS.SampleStubLibraryPCF"
    order="1"
  />
  <code path="index.ts" order="2" />
</resources>

Dependencia como carga a petición de un componente

En lugar de cargar la biblioteca dependiente cuando se carga un componente, puede cargar la biblioteca dependiente a petición. La carga a petición proporciona flexibilidad para que los controles más complejos carguen dependencias solo cuando sean necesarias, especialmente si las bibliotecas dependientes son grandes.

Para habilitar la carga bajo demanda, debe:

1. Agregue estos elementos secundarios elemento de acción de plataforma, elemento de uso de características, y elemento usa característica al elemento de control:

   <platform-action action-type="afterPageLoad" />
   <feature-usage>
      <uses-feature name="Utility"
         required="true" />
   </feature-usage>
   

2. Establezca el atributo load-type del elemento de dependencia a onDemand.

   <dependency type="control"
         name="samples_SampleNamespace.StubLibrary"
         load-type="onDemand" />
   

Pasos siguientes

Pruebe un tutorial que le guiará a través de la creación de una biblioteca dependiente.

Tutorial: Uso de bibliotecas dependientes en un componente