git 정보를 create-react-app에 추가합니다.

git 정보를 create-react-app에 추가합니다.

개발 시에는 웹에서 빌드 정보(git commit hash, author, last commit message 등)를 볼 수 있도록 하고 싶습니다.시도했습니다.

• child_process를 사용하여 git 명령줄을 실행하고 결과를 읽습니다(브라우저 환경이므로 작동하지 않습니다).
• txt 중에 파일을 합니다.npm build(environment도 할 수 없기 에).
• "syslog-rev"와 같은 외부 라이브러리를 사용한다.

해야 할 인 것 .npm run ejecthttps://www.npmjs.com/package/git-revision-webpack-plugin을 적용하지만 create-module-app에서 꺼내고 싶지 않습니다.생각나는 사람?

약간의 접선(이젝트 불필요 및 개발 중)에서는, 이것은 다음의 추가에 의해서, 현재의 git 커밋 SHA 를 메타데이터 태그로서 index.html 에 추가하는 것을 검토하고 있는 다른 유저에게 도움이 될 가능성이 있습니다.

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

패키지의 빌드 스크립트로 이동합니다.json을 추가한 후 추가(RECT_APP로 시작해야 함)그렇지 않으면 무시됩니다).

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

public 폴더에 있는 index.displaces로 이동합니다.

반응 구성요소 내에서 다음과 같이 수행합니다.

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

저는 Yifi Xu의 응답에서 영감을 얻어 create-react-app과 함께 es6 모듈을 활용한 다른 옵션을 만들었습니다.이 옵션은 javascript 파일을 만들고 빌드 파일의 상수로 가져옵니다.텍스트 파일로 가지고 있으면 쉽게 갱신할 수 있지만, 이 옵션은 js 파일이 javascript 번들에 패키지되어 있음을 보증합니다.이 파일의 이름은 _git_commit입니다.js

패키지.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에 추가하여 체크인하지 않도록 합니다(그리고 crazy git commit 루프를 만듭니다).

할 수 것은 이 일 없이는 했다.eject컴파일 시 실행되는 Babel 플러그인 매크로의 자동 구성을 가져온 Create React App 2.0(릴리스 노트)까지.모든 사람이 작업을 쉽게 하기 위해 이러한 매크로 중 하나를 작성하고 Import할 수 있는 NPM 패키지를 발행했습니다.이 패키지는 리액트 페이지에 git 정보를 가져오기 위해 Import할 수 있습니다.https://www.npmjs.com/package/react-git-info

이 기능을 사용하면 다음과 같이 할 수 있습니다.

import GitInfo from 'react-git-info/macro';

const gitInfo = GitInfo();

...

render() {
  return (
    <p>{gitInfo.commit.hash}</p>
  );
}

프로젝트 README에 더 많은 정보가 있습니다.패키지가 동작하는 라이브 데모도 보실 수 있습니다.

따라서 이젝트하지 않고는 이 작업을 수행할 수 없습니다.따라서 제가 사용한 회피책은 다음과 같습니다.

1) json, json을 정의합니다."git-info": "git log -1 --oneline > src/static/gitInfo.txt"

2) 추가npm run git-info에

3) config js 파일(또는 git 정보가 필요할 때)에는

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

저의 접근법은 @uidevthing의 답변과 조금 다릅니다.포장을 오염시키고 싶지 않아요.환경 변수 설정이 있는 json 파일.

를 하나 더 ..env이치노로로그그그그다다

아래 예에서는 typescript를 사용하지만 javascript로 변환하는 것은 간단할 것입니다.

패키지.json

node scripts/start.js

  ...
  "start": "ts-node scripts/start.ts && react-scripts start",

스크립트/start.ts

파일 " " " " " " "scripts/start.ts

const childProcess = require("child_process");
const fs = require("fs");

function writeToEnv(key: string = "", value: string = "") {
  const empty = key === "" && value === "";

  if (empty) {
    fs.writeFile(".env", "", () => {});
  } else {
    fs.appendFile(".env", `${key}='${value.trim()}'\n`, (err) => {
      if (err) console.log(err);
    });
  }
}

// reset .env file
writeToEnv();

childProcess.exec("git rev-parse --abbrev-ref HEAD", (err, stdout) => {
  writeToEnv("REACT_APP_GIT_BRANCH", stdout);
});
childProcess.exec("git rev-parse --short HEAD", (err, stdout) => {
  writeToEnv("REACT_APP_GIT_SHA", stdout);
});

// trick typescript to think it's a module
// https://stackoverflow.com/a/56577324/9449426
export {};

를 '환경변수'에 합니다..env파일을 루트 폴더에 저장합니다., 하다, 하다, 하다로 시작해야 합니다.REACT_APP_으로 읽혀집니다..env, 에 정의합니다.process.env.

App.tsx

...
console.log('REACT_APP_GIT_BRANCH', process.env.REACT_APP_GIT_BRANCH)
console.log('REACT_APP_GIT_SHA', process.env.REACT_APP_GIT_SHA)

결과

REACT_APP_GIT_BRANCH master
REACT_APP_GIT_SHA 042bbc6

기타 레퍼런스:

• https://create-create-contrace-app.dev/context-custom-environment-contrace-in-env

의 '' ''가package.json되지만 @answer와 수 단, unix answer를 행 수 .@NearHuscarl answer와 같은 결과를 얻을 수 있습니다.단, 초기화를 통해 코드 행의 수를 줄일 수 있습니다..envdotenv envenv 。된 " " ".env그런 다음 후속 단계에서 반응 검출기에 의해 픽업됩니다.

"scripts": {
  "start": "sh ./env.sh && react-scripts start"
  "build": "sh ./env.sh && react-scripts build",
}

서 ''는.env.sh한 코드가 사용자를 덮어씁니다..env각 빌드 또는 시작 시 파일 콘텐츠를 제공합니다.

{
  echo BROWSER=none
  echo REACT_APP_FOO=bar
  echo REACT_APP_VERSION=$(git rev-parse --short HEAD)
  echo REACT_APP_APP_BUILD_DATE=$(date)
  # ...
} > .env

★★★★★★★★★★★★★★★★★..env이를 "빌드"에하는 것을 고려해 주십시오.★★★★★★★★★★★★★★★★★,.gitignore하여 commitdiffs.commit diff에서 가 너무 하는 것을 합니다.

면책사항:이 솔루션은 bourne 셸 인터프리터 등이 존재하는 환경(유닉스 등)에만 유효합니다.

CRACO 및 craco-interpolate-html-plugin을 사용하여 commit hash 등의 git 정보를 index.html에 쉽게 삽입할 수 있습니다.그래야 사용할 필요가 없다.yarn eject또, 실가동 빌드와 함께 개발 서버 환경에도 대응합니다.

CRACO 를 인스톨 한 후에, 다음의 설정을 실시합니다.craco.config.js내 밑에서 일했어:

const interpolateHtml = require('craco-interpolate-html-plugin');

module.exports = {
  plugins: [
    {
      plugin: interpolateHtml,
      // Enter the variable to be interpolated in the html file
      options: {
        BUILD_VERSION: require('child_process')
          .execSync('git rev-parse HEAD', { cwd: __dirname })
          .toString().trim(),
      },
    },
  ],
};

그리고 당신의 안에index.html<meta name="build-version" content="%BUILD_VERSION%" />

.package.json모든 것을 실현하기 위해서:

"scripts": {
    "start": "craco start",
    "build": "craco build"
}

언급URL : https://stackoverflow.com/questions/48391897/add-git-information-to-create-react-app