web-dev-qa-db-fra.com

Ajouter des informations git à create-react-app

En développement, je veux pouvoir voir les informations de build (git commit hash, author, last commit message, etc) depuis le web. J'ai essayé:

  • utiliser child_process pour exécuter une ligne de commande git et lire le résultat (ne fonctionne pas car l'environnement du navigateur)
  • générer un fichier buildInfo.txt pendant npm build et lire à partir du fichier (ne fonctionne pas car fs n'est pas non plus disponible dans l'environnement du navigateur)
  • utiliser des bibliothèques externes telles que "git-rev"

La seule chose qui reste à faire semble être de faire npm run eject et en appliquant https://www.npmjs.com/package/git-revision-webpack-plugin , mais je ne veux vraiment pas m'éjecter de create-react-app. Quelqu'un a une idée?

node.jsgitcreate-react-app
21
Yifei Xu

Il s'avère donc qu'il n'y a aucun moyen d'y parvenir sans éjection, donc la solution de contournement que j'ai utilisée est la suivante:

1) dans package.json, définissez un script "git-info": "git log -1 --oneline > src/static/gitInfo.txt"

2) ajoutez npm run git-info pour démarrer et construire

3) Dans le fichier config js (ou chaque fois que vous avez besoin des informations git), j'ai

const data = require('static/gitInfo.txt')
fetch(data).then(result => {
    return result.text()
})
5
Yifei Xu

Sur une légère tangente (pas besoin d'éjecter et fonctionne en développement), cela peut être utile aux autres personnes qui cherchent à ajouter leur git commit actuel SHA dans leur index.html en tant que méta-tag en ajoutant:

REACT_APP_GIT_SHA=`git rev-parse --short HEAD`

au script de construction dans le package.json puis en ajoutant (notez qu'il DOIT commencer par REACT_APP ... sinon il sera ignoré):

<meta name="ui-version" content="%REACT_APP_GIT_SHA%">

dans le fichier index.html du dossier public.

Dans les composants React, procédez comme suit:

<Component>{process.env.REACT_APP_GIT_SHA}</Component>
29
uidevthing

J'ai créé une autre option inspirée de la réponse de Yifei Xu qui utilise les modules es6 avec create-react-app. Cette option crée un fichier javascript et l'importe en tant que constante à l'intérieur des fichiers de construction. Bien que l'avoir sous forme de fichier texte facilite la mise à jour, cette option garantit qu'il s'agit d'un fichier js empaqueté dans le bundle javascript. Le nom de ce fichier est _git_commit.js

scripts package.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 exemple de composant qui utilise ce message de validation:

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;

Notez que cela placera automatiquement votre message de validation dans le bundle javascript, alors assurez-vous qu'aucune information sécurisée n'est jamais entrée dans le message de validation. J'ajoute également le _git_commit.js créé à .gitignore pour qu'il ne soit pas archivé (et crée une boucle de validation folle de git).

10
Lawrence Coleman