我正在使用react/es6/webpack。我想在我的应用程序中的某个位置显示构建日期和git哈希值。最佳方法是什么?
我正在使用react/es6/webpack。我想在我的应用程序中的某个位置显示构建日期和git哈希值。最佳方法是什么?
// get git info from command line
let commitHash = require('child_process')
.execSync('git rev-parse --short HEAD')
.toString()
.trim();
...
plugins: [
new webpack.DefinePlugin({
__COMMIT_HASH__: JSON.stringify(commitHash)
})
]
...
__COMMIT_HASH__
。另一种实现方式是(在ANGULAR + REACT中):
只需安装这个包git-revision-webpack-plugin
这是一个简单的webpack插件,根据本地git仓库生成VERSION和COMMITHASH文件。
示例代码:
在您的webpack.config.js(或任何dev-prod文件)中:
const GitRevisionPlugin = require('git-revision-webpack-plugin');
const gitRevisionPlugin = new GitRevisionPlugin();
plugins: [
new DefinePlugin({
'VERSION': JSON.stringify(gitRevisionPlugin.version()),
'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()),
'BRANCH': JSON.stringify(gitRevisionPlugin.branch()),
}),
]
在你的组件中(React):
export class Home extends Component{
....
render() {
return(
<div>
{VERSION}
{COMMITHASH}
{BRANCH}
</div>
)
}
}
在你的模板中(Angular):
{{ VERSION }}
{{ COMMITHASH }}
{{ BRANCH }}
COMMITHASH
将是上一个提交,而不是当前提交。如何解决这个问题? - Abdull我无法评论顶部帖子,所以在这里写:
Webpack.dev.js
import gitprocess from "child_process"
let LoadCommitDate = gitprocess
.execSync('git log -1 --date=format:"%Y/%m/%d %T" --format="%ad"')
.toString()
...
plugins: [
new webpack.DefinePlugin({
COMMITDATE: JSON.stringify(LoadCommitDate),
})
]
此外,在.eslintrc中:
"globals": {
"COMMITDATE": "readonly",
},
结果-您可以在代码中引用的最新提交日期!
console.log(COMMITDATE)
2020/05/04 21:02:03
// get git info from command line
const commitHash = require('child_process')
.execSync('git rev-parse --short HEAD')
.toString()
.trim()
在你启动HtmlWebpackPlugin的更深处:
templateParameters: {
__COMMIT_HASH__: JSON.stringify(commitHash),
}
最后,在您的index.html模板中:
<!-- <%= __COMMIT_HASH__ %> -->
2个步骤以简洁且有用的方式获取提交信息。
步骤1:添加软件包
npm install --save-dev react-git-info
步骤2:在组件文件中使用
// MyComponent.js
import GitInfo from 'react-git-info/macro';
function MyComponent() {
const gitInfo = GitInfo();
return (
<div data-branch={gitInfo.branch}>
{gitInfo.commit.hash}
</div>
);
}
.eslintrc
文件中添加globals: { __COMMIT_HASH__: true }
(参考链接:https://dev59.com/11kT5IYBdhLWcg3wG74_#39053582)。 - BencommitHash
方法链的末尾加上了.trim()
,以去除换行符。 - Daniel Node.js__COMMIT_HASH__
之前重新启动Webpack开发服务器。 - dev4life