我正在使用 react/es6/webpack。我想在我的应用程序的某处显示构建日期和 git hash。最好的方法是什么？
在 webpack 构建中包含 git commit hash 和 date
IT技术
angular
reactjs
webpack
ecmascript-6
2021-05-20 08:31:13
3个回答
您可以使用 webpack 的DefinePlugin：
// 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>
)
}
}
在您的模板（角度）中：
{{ VERSION }}
{{ COMMITHASH }}
{{ BRANCH }}
我无法对置顶帖发表评论，所以这里是：
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