Creación y despliegue de la tienda
El React Store application personalizado se crea como un modelo estático de una SPA de REACT y se puede desplegar en cualquier servidor web de su elección. El proceso de compilación Store SDK da soporte a la creación de varias aplicaciones.
React Store applicationflujo de compilación
El diagrama siguiente muestra el flujo de complicación React Store application típico.
Proceso de compilación
El Store SDK incluye dos Reference Store application: la aplicación Esmeralda basada en la tienda B2C y la aplicación Zafiro basada en la tienda B2B.
Cuando se ejecuta la compilación de producción, los archivos de paquete se generan en las carpetas dist/Emerald y dist/Sapphire. El baseName de ruta de React para las aplicaciones se establece de forma predeterminada en Esmeralda y Zafiro respectivamente.
El proceso de compilación Store SDK se basa en el react-script desde la aplicación Create React. Para obtener más información, consulte https://create-react-app.dev/docs/getting-started.
Para personalizar el proceso de compilación, consulte Personalización del proceso de compilación.
Scripts de construcción
Los scripts de compilación se encuentran en la carpeta tools/scripts.
- start.js se utiliza cuando un usuario ejecuta los mandatos
npm start
,npm run mock
onpm run preview
que inician un servidor de desarrollo de React. - build.js se utiliza cuando un usuario ejecuta
npm run build
para crear los paquetes de aplicaciones. - buildConstant.jsdefine las constantes que se utilizan durante la compilación.
- Los otros scripts de la carpeta son scripts auxiliares para build.js y start.js.
Cree elementos
Los elementos de compilación se encuentran en la carpeta assets.
- La subcarpeta common tiene todos los elementos comunes que utilizan las aplicaciones.
- Las subcarpetas Emerald y Sapphire se nombran según los nombres de aplicación. Todos los elementos específicos de la aplicación se encuentran en estas carpetas.
- La subcarpeta template es para los archivos de plantilla que se utilizan durante el proceso de compilación. Un archivo de plantilla normalmente incluye señales que corresponden a valores en los scripts de compilación.
Durante el proceso de compilación, todos los archivos de las subcarpetas se copian en el destino con la misma estructura de carpetas que en el proyecto. Por ejemplo, .env.development.template en la carpeta template se envía la salida a la raíz del proyecto como .env.development.
- La carpeta predeterminada se copia primero.
- Para la modalidad simulada, cuando se ejecuta
npm run mock
, los archivos de la carpeta mock se copian y la carpeta predeterminada se sobrescribe. - Para la modalidad de vista previa, cuando se ejecuta
npm run preview
, los archivos de la carpeta preview se copian y la carpeta predeterminada se sobrescribe. - Si no se especifica una modalidad y se ejecuta
npm start
, solo se copia la carpeta predeterminada. - Para la compilación de producción, cuando se ejecuta
npm run build
, la carpeta production se copia y la carpeta predeterminada se sobrescribe.
Flujo de proceso de compilación
Las siguientes acciones se producen al ejecutar un mandato de compilación:
npm start
, npm run preview
y npm run mock
:- Limpiar carpeta public. La carpeta public es la carpeta Elementos de la aplicación Create React. Para obtener más información, consulte https://create-react-app.dev/docs/using-the-public-folder/.
- Copie los elementos de la aplicación de la carpeta assets a la carpeta public predeterminada.
- Copie plantillas de la carpeta template, incluidas las variables de entorno, en .env.
- Ejecute el
react-script start
.
npm run build
- Limpiar carpeta dist. El dist es donde el proceso de compilación genera los paquetes.
- Limpiar carpeta public.
- Copie los elementos de la aplicación de la carpeta assets a la carpeta public predeterminada.
- Copie plantillas de la carpeta template, incluidas las variables de entorno, en .env.
- Ejecute el
react-script build
. - Copie los archivos de la carpeta build en la carpeta dist/<appName>.
- Limpiar carpeta public.
- Continúe con la compilación de la segunda aplicación si aplica.