web-dev-qa-db-ja.com

git情報をcreate-react-appに追加します

開発では、Webからビルド情報（gitコミットハッシュ、作成者、最終コミットメッセージなど）を確認できるようにしたいと考えています。私が試してみました：

  • child_processを使用してgitコマンドラインを実行し、結果を読み取ります（ブラウザー環境のため動作しません）
  • npm build中にbuildInfo.txtファイルを生成し、ファイルから読み取ります（ブラウザー環境ではfsも使用できないため機能しません）
  • 「git-rev」などの外部ライブラリを使用します

行うべきことは、npm run ejectを実行して https://www.npmjs.com/package/git-revision-webpack-plugin を適用することだけです。 create-react-appから排出したい。誰でもアイデアはありますか？

node.jsgitcreate-react-app
21
Yifei Xu

したがって、イジェクトせずにこれを達成する方法はないことが判明したため、使用した回避策は次のとおりです。

1）package.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()
})
5
Yifei Xu

わずかな接線で（イジェクトする必要がなく、開発中に動作します）、これは、現在のgit commit SHAをメタタグとして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>
29
uidevthing

Create-react-appでes6モジュールを利用するYifei Xuの応答に触発された別のオプションを作成しました。このオプションは、javascriptファイルを作成し、ビルドファイル内の定数としてインポートします。テキストファイルとして保持することで更新が容易になりますが、このオプションにより、javascriptバンドルにパッケージ化されたjsファイルになります。このファイルの名前は_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コミットループが作成されます）。

10
Lawrence Coleman