Добавить git-информацию для создания-реагирования-приложения

В процессе разработки я хочу видеть информацию о сборке (хэш git commit, автор, сообщение последнего коммита и т.д.) Из Интернета. Я пытался:

используйте child_process для выполнения командной строки git и чтения результата (не работает из-за среды браузера)
генерировать файл buildInfo.txt во время npm build и читать из файла (не работает, так как fs также недоступен в среде браузера)
использовать внешние библиотеки, такие как "git-rev"

Похоже, единственное, что осталось сделать, это выполнить npm run eject и применить https://www.npmjs.com/package/git-revision-webpack-plugin, но я действительно не хочу выталкивать из create-реагировать приложение. У кого-нибудь есть идеи?

Ответ 1

Таким образом, оказывается, что этого невозможно избежать, поэтому обходной путь, который я использовал, - это:

1) в package.json, определите скрипт "git-info": "git log -1 --oneline > src/static/gitInfo.txt"

2) добавьте npm run git-info для запуска и сборки

3) В файле конфигурации js (или всякий раз, когда вам нужна информация git), у меня есть

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

Ответ 2

При небольшом касании (не нужно извлекать и работает в разработке), это может помочь другим людям, желающим добавить свой текущий SHA git commit в их index.html в качестве мета-тега, добавив:

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

к сценарию сборки в package.json с последующим добавлением (обратите внимание, что он ДОЛЖЕН начинаться с REACT_APP... или он будет проигнорирован):

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

в index.html в общей папке.

Внутри реагирующих компонентов сделайте это так:

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

Ответ 3

Я создал еще один вариант, вдохновленный ответом Yifei Xu, который использует модули es6 с приложением create-response-app. Этот параметр создает файл javascript и импортирует его как константу внутри файлов сборки. Хотя это как текстовый файл упрощает обновление, этот параметр гарантирует, что это файл js, упакованный в пакет javascript. Имя этого файла: _git_commit.js

Скрипты 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",

Образец компонента, который потребляет это сообщение коммита:

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;

Обратите внимание, что это автоматически поместит ваше сообщение коммита в пакет javascript, поэтому убедитесь, что никакая защищенная информация никогда не вводится в сообщение коммита. Я также добавляю созданный _git_commit.js в.gitignore, чтобы он не проверял (и создает сумасшедший цикл фиксации git).