Configurar el entorno de desarrollo de SharePoint Framework

  • Artículo

Puede usar cualquier editor de texto para compilar soluciones de SharePoint Framework (SPFx). También puede usar un entorno de macOS, Windows o Linux.

Nota:

Antes de seguir los pasos de este artículo, asegúrese de Configurar el espacio empresarial de Microsoft 365.

También puede seguir estos pasos viendo este vídeo en el canal de YouTube, Microsoft 365 Platform Communtiy (PnP):

Importante

Para los pasos siguientes se supone que está creando soluciones para SharePoint Online con la versión más reciente de SharePoint Framework. Si va a crear soluciones para SharePoint Server 2019 o SharePoint Server 2016, consulte la documentación adicional a la que se hace referencia en la siguiente secciónVea también.

Instalar Node.js

Instale la versión LTS más reciente de Node.js v16.

Esta versión es la versión recomendada actualmente de Node.js para usar con SharePoint Framework (a menos que se especifique lo contrario a continuación).

Importante

Node.js se actualiza con frecuencia y está disponible en varias plataformas, incluidas Windows, macOS y Linux. Como los vínculos de descarga exactos cambian con frecuencia, no se vinculan desde esta página. En su lugar, use los detalles siguientes para determinar el instalador que se descargará para la plataforma.

Tenga en cuenta que Node.js mantiene dos versiones diferentes en todo momento: lts & versión actual. SharePoint Framework solo es compatible con versiones LTS. Para obtener más información sobre las versiones de soporte técnico a largo plazo (LTS) de Node.js, consulte: Node.js Releases( Versiones deNode.js>).

Sugerencia

El sitio web de Node.js siempre recomienda el instalador más reciente para las versiones actuales de LTS & . Para descargar versiones específicas de Node.js versiones, use la página descargas >Node.js > versiones anteriores.

  • Los usuarios de Windows pueden usar los instaladores *.msi para x86 o x64 en función de la instalación de Windows. Normalmente solo hay dos archivos *.msi disponibles con nombres similares a node-v{version-number}-x[86|64].msi.
  • Los usuarios de macOS pueden usar el instalador *.pkg que normalmente se denomina node-v{version-number}.pkg.

Para comprobar si ya tiene Node.js instalado (incluida la versión instalada), ejecute el comando siguiente:

node --version

El SharePoint Framework v1.16.0 se admite en las siguientes versiones de Node.js:

  • Node.js v16 LTS (v16.13.x - v16.18.x, también conocido como Gallium)

Precaución

Si va a crear componentes de SharePoint Framework para implementaciones locales de SharePoint, consulte las páginas adicionales que aparecen en la sección Vea también para obtener más información.

Instalar un editor de código

Puede usar cualquier editor de código o IDE que admita el desarrollo del lado cliente para compilar el elemento web, como:

En los pasos y ejemplos de esta documentación se usa Visual Studio Code, pero puede usar el editor que prefiera.

Requisitos previos de instalación de la cadena de herramientas de desarrollo

La cadena de herramientas de desarrollo y compilación de SharePoint Framework usa diversas herramientas populares de código abierto. Aunque la mayoría de las dependencias se incluyen en cada proyecto, tiene que instalar algunas dependencias de forma global en la estación de trabajo.

Sugerencia

Puede instalar estas tres herramientas en una sola línea:

npm install gulp-cli yo @microsoft/generator-sharepoint --global

Instalar Gulp

Gulp es un ejecutor de tareas basado en JavaScript que sirve para automatizar tareas repetitivas. La cadena de herramientas de compilación de SharePoint Framework usa tareas Gulp para compilar proyectos y crear agrupaciones de JavaScript y los paquetes resultantes que se usan para implementar soluciones.

Escriba el siguiente comando para instalar la CLI de Gulp:

npm install gulp-cli --global

Instalar Yeoman

Yeoman le ayuda a iniciar rápidamente nuevos proyectos y recomienda procedimientos y herramientas que le ayudarán a mantener la productividad. Las herramientas de desarrollo del lado cliente de SharePoint incluyen un generador de Yeoman para crear nuevos elementos web. El generador proporciona herramientas de compilación comunes, código reutilizable común y un sitio web de prueba común para hospedar los elementos web y probarlos.

Importante

SpFx v1.13 forward requiere Yeoman v4.x.

Escriba el siguiente comando para instalar Yeoman:

npm install yo --global

Instalar el generador de SharePoint de Yeoman

El generador de elementos web de SharePoint de Yeoman le ayuda a crear rápidamente un proyecto de solución del lado cliente de SharePoint con la estructura de proyecto y cadena de herramientas correcta.

Para instalar el generador de SharePoint Framework de Yeoman de manera global, escriba el comando siguiente:

npm install @microsoft/generator-sharepoint --global

Para obtener más información sobre el generador de SharePoint de Yeoman, consulte Generador de Yeoman para SharePoint Framework.

Instalar un explorador web moderno

Debe usar un explorador web moderno como Microsoft Edge, Google Chrome o Firefox como el explorador de desarrollo.

Confiar en el certificado de desarrollador autofirmado

El servidor web local de SharePoint Framework, usado al probar soluciones personalizadas de su entorno de desarrollo, utiliza HTTPS de forma predeterminada. Esto se implementa con un certificado SSL autofirmado de desarrollo. Su entorno de desarrollo no confía en los certificados SSL autofirmados. Primero debe configurar el entorno de desarrollo para confiar en el certificado.

Una tarea de utilidad se incluye en cada proyecto SharePoint Framework en forma de una tarea de Gulp. Puede elegir hacerlo ahora o esperar a crear su primer proyecto como se explica en el tutorial Compilar el primer elemento web del lado cliente de SharePoint (parte 1 de Hello World).

Una vez que un proyecto se haya creado con el generador de Yeoman para SharePoint Framework, ejecute el siguiente comando desde dentro de la carpeta raíz del proyecto.

gulp trust-dev-cert

Nota:

Esta acción supone que ha instalado todas las dependencias con npm install después de crear el proyecto. Este paso instalará todas las tareas de Gulp como parte de un proyecto.

Herramientas opcionales

Aquí tiene algunas herramientas que también pueden ser útiles:

Pasos siguientes

Ahora tiene todo listo para compilar el primer elemento web del lado cliente.

SPFx & SharePoint Server (local)

SPFx está disponible en SharePoint Online (SPO), SharePoint Server 2019, & SharePoint Server 2016. En las instrucciones de configuración de esta página se supone que está creando soluciones con la versión más reciente de SPFx para SharePoint Online.

SharePoint Online contiene todas las versiones de SPFx, incluidas todas las versiones anteriores y más recientes. Cada solución de SPFx contiene información para indicar a SPO de qué entorno de ejecución de SPFx depende.

Si va a crear soluciones para una implementación local de SharePoint Server, revise la sección Vea también para obtener más información sobre versiones específicas de SharePoint. Cada SharePoint local solo admite una versión específica de SPFx. Esto puede introducir configuraciones de entorno de desarrollo complicadas si va a crear diferentes soluciones para diversas implementaciones de SharePoint.

  • SharePoint Server 2016 usa la versión 1.1 de SharePoint Framework (SPFx).
  • SharePoint Server 2019 usa la versión v1.4.1 de SharePoint Framework (SPFx).

En función de su escenario, puede que necesite mantener entornos de desarrollo diferentes. Los desarrolladores han usado los siguientes enfoques para abordar estos desafíos:

  • máquinas virtuales
  • Docker
  • Administrador de versiones de nodo (NVM)

Sugerencia

Para obtener más información sobre NVM, consulte Better Node.js Install Management with Node Version Manager (Mejor Node.js administración de instalación con Node Version Manager).

Solución de problemas

Comprobar la versión de los paquetes instalados globalmente

Para obtener una lista de todos los paquetes instalados de forma global, ejecute el comando siguiente:

npm list --global --depth=0️

No se puede confiar en el certificado de desarrollo autofirmado

Si tiene problemas para confiar en el certificado autofirmado al ejecutar gulp trust-dev-cert& , ha comprobado que están instaladas las versiones correctas de todas las dependencias, una solución que normalmente vemos resolver el problema es desinstalar todos los paquetes instalados globalmente, desinstalar Node.js y reiniciar & de nuevo.

En algunos casos, ejecutar el comando gulp trust-dev-cert, no tiene el efecto deseado de confiar en el certificado de desarrollo autofirmado en su máquina. En casos excepcionales como este, debe eliminar una carpeta oculta que se genera en la carpeta de perfil.

Busque & eliminar la carpeta {{homedir}}/.gcb-serve-data para la versión de SPFx anterior a la versión v1.12.1. Para versiones posteriores, elimine la carpeta {{homedir}}/.rushstack e intente confiar de nuevo en el certificado de desarrollo autofirmado. De lo contrario, la ejecución de gulp untrust-dev-cert tendrá el mismo efecto para quitar los archivos de certificado de la carpeta de perfiles.

En caso de que el certificado no se agrega a la entidad de certificación raíz de confianza a pesar de ejecutar gulp trust-dev-cert debido a que algunas directivas bloquean la acción, el archivo rushstack-serve.pem de la carpeta {{homedir}}/.rushstack se puede importar manualmente en el Administrador de certificados en Entidad de certificación raíz de confianza con una cuenta de administrador local.

No se pueden instalar paquetes con NPM: proxies corporativos

Si su entorno de desarrollo está detrás de un proxy corporativo, debe configurar NPM para usar a ese proxy. Consulte los documentos de npm-config sobre cómo configurar el entorno de desarrollo detrás de un proxy corporativo, específicamente la configuración proxy&httpproxy. Más información: Configuración de NPM para un proxy web corporativo

Vea también