Generador de Yeoman para SharePoint Framework
El generador de Yeoman de SharePoint Framework SPFx le ayuda a crear rápidamente proyectos de solución del lado cliente de SharePoint con la estructura de proyecto y la cadena de herramientas correctos. Se usa junto con Yeoman para preguntarte si tienes preguntas para crear el scaffolding del proyecto (los archivos de carpetas & ).
Importante
En esta página se da por supuesto que ya ha instalado todos los requisitos previos necesarios para desarrollar soluciones de SharePoint Framework. Compruebe las instrucciones actualizadas que se describen en la página Configurar el entorno de desarrollo de SharePoint Framework.
El generador de Yeoman de SharePoint Online de SPFx (el “generador de SPFx"), usa las respuestas a las preguntas que se plantean al desarrollador para crear un nuevo proyecto de SharePoint Framework (SPFx). En función de las respuestas a las preguntas se van presentando otras.
Por ejemplo, si selecciona el tipo de componente WebPart, solo verá preguntas sobre el nombre del elemento web y el tipo de plantilla. Sin embargo, si selecciona el tipo de componente Extension, también se le preguntará por el tipo de extensión, como el personalizador de aplicación, el personalizador de campo o el conjunto de comandos ListView.
A continuación se muestra la creación de una nueva solución denominada sfpxplay-01 en la carpeta actual con un elemento web denominado HelloWorld que usa la plantilla de proyecto Minimalista:
yo @microsoft/sharepoint --skip-install
_-----_ ╭──────────────────────────╮
| | │ Welcome to the │
|--(o)--| │ SharePoint Online SPFx │
`---------´ │ Yeoman │
( _´U`_ ) │ Generator@1.14.0 │
/___A___\ /╰──────────────────────────╯
| ~ |
__'.___.'__
´ ` |° ´ Y `
Let's create a new SharePoint solution.
? What is your solution name? spfxplay-01
? Which type of client-side component to create? WebPart
Add new Web part to solution spfxplay-01.
? What is your Web part name? HelloWorld
? Which template would you like to use? Minimal
create package.json
force .yo-rc.json
create config/package-solution.json
create config/config.json
create config/serve.json
create tsconfig.json
create .vscode/launch.json
create .vscode/settings.json
create config/deploy-azure-storage.json
create config/write-manifests.json
create src/index.ts
create README.md
create .gitignore
create .npmignore
create gulpfile.js
create tslint.json
create src/webparts/helloWorld/loc/en-us.js
create src/webparts/helloWorld/loc/mystrings.d.ts
create src/webparts/helloWorld/HelloWorldWebPart.module.scss
create src/webparts/helloWorld/HelloWorldWebPart.ts
create src/webparts/helloWorld/HelloWorldWebPart.manifest.json
create teams/55564fc2-179d-4bc1-bd63-9ede8183dadc_outline.png
create teams/55564fc2-179d-4bc1-bd63-9ede8183dadc_color.png
Changes to package.json were detected.
Skipping package manager install.
_=+#####!
###########| .------------------------------------.
###/ (##|(@) | Congratulations! |
### ######| \ | Solution spfxplay-01 is created. |
###/ /###| (@) | Run gulp serve to play with it! |
####### ##| / '------------------------------------'
### /##|(@)
###########|
**=+####!
Sugerencia
Los distintos tipos de componentes y opciones se tratan en toda la documentación de este sitio. Todas las opciones no se tratan en esta página. Para obtener más información sobre los detalles de cada tipo de componente, consulte los temas pertinentes en la documentación.
Instalar el generador Yeoman de SPFx de SharePoint Online
El generador SPFx está disponible como un paquete npm. Instale la versión más reciente del generador de SPFx ejecutando el siguiente comando en una consola:
npm install @microsoft/generator-sharepoint -g
También puede instalar una versión específica del generador especificando el número de versión en el nombre del paquete, separados con un @1. Por ejemplo, para instalar el generador de SPFx v1.10, ejecute el siguiente comando:
npm install @microsoft/generator-sharepoint@1.10 -g
Opciones de plantilla de proyecto
Antes de SPFx v1.14, el generador proporcionaba a los desarrolladores dos plantillas de proyecto:
- Sin marco de JavaScript:
- React
Nota:
Una tercera opción, Knockout, estaba disponible en todas las versiones de SPFx hasta SPFx v1.10. Knockout se retiró como opción en SPFx v1.11.
Estas plantillas incluían el código mínimo que un proyecto necesitaba para empezar a crear soluciones. La plantilla Sin marco de JavaScript usaba HTML y CSS para aplicar estilo a un componente básico, mientras que la plantilla React usaba HTML, React y CSS para hacer lo mismo.
Plantillas de proyecto actualizadas en SPFx v1.14 con compatibilidad con temas
En la versión 1.14 de SPFx, el generador SPFx introdujo nuevas & plantillas de proyecto actualizadas. El objetivo de estas plantillas es incluir el código necesario para admitir el tema en el entorno actual donde se ejecuta el componente (SharePoint o Microsoft Teams).
El código incluido en estas plantillas simplifica el trabajo inicial que los desarrolladores deben realizar para agregar compatibilidad para los temas a sus componentes. Por ejemplo, con estas plantillas, todo el código necesario para determinar los colores y la fuente que se usen en el sitio de SharePoint actual están disponibles en el elemento web y el elemento web recibirá una notificación cuando el tema cambie para seleccionar la nueva configuración del tema.
Para los componentes de SPFx usados en el contexto de Microsoft Teams, recibirán los detalles del tema para el cliente actual de Microsoft Teams, como el valor predeterminado (claro), oscuro y contraste alto.
Además, estas plantillas incluyen el código para determinar si el componente se está ejecutando actualmente en un contexto de SharePoint o en un contexto de Microsoft Teams.
Por ejemplo, los siguientes métodos se incluyen en las dos plantillas. El método _getEnvironmentMessage() devuelve una cadena que indica si el componente se está ejecutando actualmente en SharePoint o Microsoft Teams y si se implementa en producción o en desarrollo (se sirve desde localhost). El onThemeChanged() determina si el tema actual está en modo oscuro y aplica algunos cambios a las propiedades en función de los colores del tema actual:
private _getEnvironmentMessage(): string {
if (!!this.context.sdks.microsoftTeams) { // running in Teams
return this.context.isServedFromLocalhost
? strings.AppLocalEnvironmentTeams
: strings.AppTeamsTabEnvironment;
}
return this.context.isServedFromLocalhost
? strings.AppLocalEnvironmentSharePoint
: strings.AppSharePointEnvironment;
}
protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
if (!currentTheme) {
return;
}
this._isDarkTheme = !!currentTheme.isInverted;
const {
semanticColors
} = currentTheme;
this.domElement.style.setProperty('--bodyText', semanticColors.bodyText);
this.domElement.style.setProperty('--link', semanticColors.link);
this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered);
}
Plantilla de proyecto minimalista
Se agregó una nueva opción de plantilla de proyecto, Minimalista, al generador de SPFx en SPFx v1.14. Esta opción de plantilla de proyecto no incluye ningún tema ni código de entorno de host en proyectos nuevos.
Por ejemplo, un nuevo proyecto de elemento web comienza con el código siguiente, que representa el código mínimo necesario para ejecutar el elemento web:
export default class HelloWorldMinimalWebPart
extends BaseClientSideWebPart<IHelloWorldMinimalWebPartProps> {
protected onInit(): Promise<void> {
return super.onInit();
}
public render(): void {
this.domElement.innerHTML = `<div class="${ styles.helloWorldMinimal }"></div>`;
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
}
Solicitudes del generador retiradas
Con cada versión de SharePoint Framework, se pueden agregar o quitar solicitudes en el generador de Yeoman. Se eliminaron solicitudes para simplificar la experiencia de creación del proyecto.
En la siguiente sección, encontrará las solicitudes retiradas con instrucciones para aplicar.
Plantear como objetivo diferentes entornos de SharePoint
En la versión SPFx v1.13, se retiró la siguiente solicitud:
¿Qué paquetes de línea de base desea que se destinen al componente o los componentes?
Esta solicitud presentaba al desarrollador la opción de crear un proyecto destinado a implementaciones específicas de SharePoint, entre las que se incluyen:
- Solo SharePoint Online (versiones más recientes)
- SharePoint 2016 en adelante, incluidos 2019 y SharePoint Online
- SharePoint 2019 en adelante, incluido SharePoint Online
A partir de SPFx v1.13, el generador solo puede crear proyectos para SharePoint Online.
Saltar implementación de características: skipFeatureDeployment
En la versión SPFx v1.14, se retiró la siguiente solicitud:
¿Desea permitir que el administrador de inquilinos pueda implementar la solución en todos los sitios inmediatamente sin ejecutar ninguna implementación de características ni agregar aplicaciones en sitios?
En esta pregunta se plantea si la solución se debe instalar automáticamente para todos los sitios del inquilino o si se debe instalar manualmente en cada sitio. La opción predeterminada era [N]o.
Nota:
Obtenga más información sobre esta solicitud: Implementación de soluciones destinadas en el ámbito del inquilino para soluciones de SharePoint Framework.
El resultado de esta pregunta se estableció en la propiedad skipFeatureDeployment del archivo ./config/package-solution.json.
A partir de SPFx v1.14, la propiedad skipFeatureDeployment tiene como valor predeterminado true. Puede cambiar el valor de esta propiedad después de crear el proyecto, si es necesario.
Elemento web aislado del dominio: isDomainIsolated
En la versión SPFx v1.14, se retiró la siguiente solicitud:
¿Los componentes de la solución necesitarán permisos para acceder a las API web que son exclusivas y no se compartirán con otros componentes en el espacio empresarial?:
En esta pregunta se plantea si los elementos web dentro de la solución deberían representarse dentro de un IFRAME en un dominio único o en un DIV como la página actual. La opción predeterminada era [N]o.
Nota:
Obtenga más información sobre esta solicitud: Elementos web aislados
El resultado de esta pregunta se estableció en la propiedad isDomainIsolated del archivo ./config/package-solution.json.
A partir de SPFx v1.14, la propiedad isDomainIsolated tiene como valor predeterminado false. Puede cambiar el valor de esta propiedad después de crear el proyecto, si es necesario.
¿Qué marco desea utilizar?
En la versión SPFx v1.14, se cambió la siguiente solicitud:
¿Qué marco desea utilizar?
Este mensaje se mostró para tipos de proyecto específicos, como los tipos de elementos & web de extensiones SPFx. Permitía a los desarrolladores seleccionar entre diferentes plantillas de proyecto: Sin marco de JavaScript o React.
El scaffolding predeterminado del proyecto creado por el generador de Yeoman se determinó mediante la opción seleccionada.
En SPFx v1.14, esta solicitud se modificó a la siguiente y presentó al usuario tres opciones: Minimalista, Sin marco o React:
¿Qué plantilla desea usar?
Descripción del componente
En la versión SPFx v1.14, se retiraron las siguientes solicitudes:
¿Cuál es la descripción del elemento web?
¿Cuál es la descripción del personalizador de aplicación?
¿Cuál es la descripción del personalizador de campo?
¿Cuál es la descripción del conjunto de comandos ListView?
¿Cuál es la descripción de la biblioteca?
¿Cuál es la descripción de su extensión de tarjeta adaptable?
Los valores de estas solicitudes se establecieron en las preConfiguredEntries[0].description.default&preConfiguredEntries[0].properties.description propiedades del archivo *.manifest.json del componente.
A partir de SPFx v1.14, estas propiedades se establecen en cadenas vacías. Puede cambiar el valor de estas propiedades después de crear el proyecto, si es necesario.
Opciones de línea de comandos del generador de SPFx
Puede usar las opciones de línea de comandos del generador de SPFx para crear proyectos en un comando en lugar de pasar por los mensajes. Ejecute el siguiente comando para ver la lista de opciones de la línea de comandos disponibles para el generador de SharePoint:
yo @microsoft/sharepoint --help