Configurar el entorno de desarrollo de SharePoint Framework
Puede usar cualquier editor de texto para compilar soluciones de SharePoint Framework. 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 en el vídeo del canal de YouTube de SharePoint 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 más reciente de Node.js LTS v14.
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 y Versión actual. SharePoint Framework solo es compatible con versiones LTS. Para obtener más información sobre la programación de soporte a largo plazo (LTS) de Node.js, consulte: Node.js > Versiones.
Sugerencia
El sitio web de Node.js siempre recomienda el instalador más reciente para las versiones de LTS y más recientes. Para descargar versiones específicas de las versiones de Node.js, use la página Node.js > Descargas > versiones anteriores.
- Los usuarios de Windows pueden usar los instaladores *.msi para x86 o x64 según su instalación de Windows. Por lo general, 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 suele llamarse node-v{version-number}.pkg.
Para comprobar si ya tiene Node.js instalado (incluida la versión instalada), ejecute el comando siguiente:
node --version
SharePoint Framework v1.13.1 es compatible con las siguientes versiones de Node.js:
- Node.js v12.13.0+ (Erbium)
- Node.js v14.15.0+ (Fermium)
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
La versión 4.x de Yeoman es necesaria para el reenvío de SharePoint Framework 1.13.
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, vea Scaffolding de proyectos con el generador de SharePoint de Yeoman.
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:
- Fiddler
- Postman
- Terminal Windows
- Cmder para Windows
- Oh My Zsh para Mac
- Herramientas de controles de origen de Git
Pasos siguientes
Ahora tiene todo listo para compilar el primer elemento web del lado cliente.
SPFx y SharePoint Server (local)
SPFx está disponible en SharePoint Online (SPO), SharePoint Server 2019 y 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)
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 su certificado autofirmado cuando ejecuta gulp trust-dev-cert y ha verificado que están instaladas las versiones correctas de todas las dependencias, una solución que normalmente vemos que resuelve el problema es desinstalar todas las instaladas globalmente. paquetes, desinstale Node.js, reinicie y comience 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 y elimine la carpeta {{homedir}}/.gcb-serve-data y luego intente volver a confiar en el certificado de desarrollo autofirmado.
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: How to setup Node.js and Npm behind a corporate web proxy (Cómo configurar Node.js y Npm detrás de un proxy web corporativo)