En desarrollo, quiero poder ver la información de compilación (hash de confirmación de git, autor, último mensaje de confirmación, etc.) desde la web. Yo he tratado:
npm build de npm y leer del archivo (no funciona porque fs tampoco está disponible en el entorno del navegador) Lo único que queda por hacer parece ser hacer npm run eject y aplicar https://www.npmjs.com/package/git-revision-webpack-plugin , pero realmente no quiero expulsar de create-react- aplicación ¿Alguien tiene alguna idea?
En una pequeña tangente (no es necesario expulsar y funciona en desarrollo), esto puede ser de ayuda para otras personas que buscan agregar su git commit SHA actual en su index.html como una metaetiqueta agregando:
REACT_APP_GIT_SHA=`git rev-parse --short HEAD`al script de compilación en el paquete.json y luego agregar (tenga en cuenta que DEBE comenzar con REACT_APP... o será ignorado):
<meta name="ui-version" content="%REACT_APP_GIT_SHA%">en index.html en la carpeta pública.
Dentro de los componentes de reacción, hazlo así:
<Component>{process.env.REACT_APP_GIT_SHA}</Component>Creé otra opción inspirada en la respuesta de Yifei Xu que utiliza módulos es6 con create-react-app. Esta opción crea un archivo javascript y lo importa como una constante dentro de los archivos de compilación. Si bien tenerlo como un archivo de texto facilita la actualización, esta opción garantiza que sea un archivo js empaquetado en el paquete de javascript. El nombre de este archivo es _git_commit.js
scripts de paquete.json:
"git-info": "echo export default \"{\\\"logMessage\\\": \\\"$(git log -1 --oneline)\\\"}\" > src/_git_commit.js", "precommit": "lint-staged", "start": "yarn git-info; react-scripts start", "build": "yarn git-info; react-scripts build",Un componente de muestra que consume este mensaje de confirmación:
import React from 'react'; /** * This is the commit message of the last commit before building or running this project * @see ./package.json git-info for how to generate this commit */ import GitCommit from './_git_commit'; const VersionComponent = () => ( <div> <h1>Git Log: {GitCommit.logMessage}</h1> </div> ); export default VersionComponent;Tenga en cuenta que esto colocará automáticamente su mensaje de confirmación en el paquete de JavaScript, así que asegúrese de que nunca se ingrese información segura en el mensaje de confirmación. También agrego el _git_commit.js creado a .gitignore para que no se registre (y crea un bucle de confirmación de git loco).
Era imposible poder hacer esto sin eject hasta Create React App 2.0 ( Notas de la versión ), que trajo consigo la configuración automática de macros de complementos de Babel que se ejecutan en tiempo de compilación. Para simplificar el trabajo para todos, escribí una de esas macros y publiqué un paquete NPM que puede importar para obtener información de git en sus páginas de React: https://www.npmjs.com/package/react-git-info
Con él, puedes hacerlo así:
import GitInfo from 'react-git-info/macro'; const gitInfo = GitInfo(); ... render() { return ( <p>{gitInfo.commit.hash}</p> ); }El proyecto README tiene más información. También puede ver una demostración en vivo del paquete funcionando aquí .