很多场景下,需要往代码里注入当前项目的版本号。最简单的,可以通过以下方式获取到:
export const version = require('./package.json').version;
这样虽然可行,但是考虑到需要打包的场合(例如需要在前端页面中获取并显示,或者是输出纯粹精简的模块文件),由于实际上会引入整个 package.json
,会导致信息泄漏与冗余。例如,webpack
在遇到
require('./package.json')
时,会把完整的 package.json
打包到目标文件中,而实际上,我们只希望写入一个版本号。
webpack.DefinePlugin
webpack 自带的插件 DefinePlugin
可以通过定义替换字符串的方式实现这个目标。具体来说,在构建时通过以上方式获取 version
, 再通过 DefinePlugin
声明将构建目标文件中的特定的字符串(往往是环境变量的形式)查找替换为该值:
// in webpack config, add this plugin
new webpack.DefinePlugin({
'process.env': JSON.stringify({
VERSION: require('./package.json').version,
}),
})
//...
// in source codes, use this environment variable
export const version = process.env.VERSION;
npm environments
其实,npm 在运行代码时也会默认的往当前运行环境中注入许多以 npm_package_
作为前缀的环境变量,例如:
npm_package_version
: 当前 npm 工程的package.json
内定义的version
字段值;npm_package_name
: 当前 npm 工程的package.json
内定义的name
字段值;
这些环境变量能在运行时通过 process.env
直接访问,因此我们也可以在使用 DefinePlugin
时直接使用 process.env.npm_package_version
:
// in webpack config, add this plugin
new webpack.DefinePlugin({
'process.env': JSON.stringify({
VERSION: process.env.npm_package_version,
}),
})
//...
// in source codes, use this environment variable
export const version = process.env.VERSION;