Javascript 在我的应用程序上显示git标签（版本）'；react中的登录页面

我想在我的应用程序的登录页面上显示当前git标记， 它是用react构建的。 我正在尝试使用“git rev sync”库来实现这一点。 但是它在客户端似乎不起作用，因为我经常会遇到这样的错误 '找不到模块'子进程'，它在服务器端工作，我可以在服务器端console.log并打印标记 有人知道如何做到这一点吗？对任何库的任何解决方案开放

import version from 'git-rev-sync'
...
class Login extends Component {
...
render ()
...
return (
<div> my version: {version.tag()} </div>
) }

Thanks

从'git rev sync'导入版本
...
类登录扩展组件{
...
渲染（）
...
返回(
我的版本：{version.tag（）}
) }
谢谢

如果使用了

创建react-app@0.2.3>

生成您的应用程序

创建react应用程序脚本使用以root.env文件中的

react\u app\u

符号开头的环境变量。是深入了解细节的好地方

或者只在.env文件中包含以下内容

环境署署长

REACT\u APP\u VERSION=$npm\u package\u VERSION

---

并通过参考

{process.env.react_APP_VERSION}

在您的react登录组件上访问它。我决定使用git revision webpack插件在dist文件夹中创建一个版本文件（以及其他文件），然后从客户端react APP读取该文件： 将此添加到您的webpack.js：

const GitRevisionPlugin = require('git-revision-webpack-plugin')

module.exports = {
  plugins: [
    new GitRevisionPlugin({
      lightweightTags: true //I added this to get the tags as well
    })
  ]
}

然后我的客户端看起来像这样：

  const [revision, setRevision] = useState('')

  const fetchRevision = async () => {
    let result = await fetch('/dist/VERSION')
    let txt = await result.text()
    txt = txt.replace(/^(.*?)(?:\-.*)?$/, '$1') //I only care for the tag.
    setRevision(txt)
  }

  useEffect(() => {
    fetchRevision()
  }, [])

然后可以渲染修订

需要注意的一点是，根据您的服务器，您可能需要告诉它按原样提供此版本文件，因此，例如在express中，您可能会发现您需要：

server.get('*', (req, res, next) => {
  if (/^\/dist\/*/.test(req.originalUrl)) {
    const relative = req.originalUrl.replace(/\/dist(\/.*)/, '$1')
    const filename = path.join(compiler.outputPath, relative)
    compiler.outputFileSystem.readFile(filename, (err, result) => {
      if (err) {
        return next(err)
      }
      res.send(result)
      res.end()
    })
  }
  ...
})

希望这对将来的使用有所帮助