如何使用webpack注入内部版本号？

Question

我想在我的项目中注入构建号和版本信息,因为它是用webpack构建的.例如,以便我的代码可以执行以下操作:

var buildInfo = require("build-info");

build-info在构建时生成该模块的最佳方法是什么？

Answer 1

您可以使用DefinePlugin,它将使您的构建信息与您的代码内联:

配置

new webpack.DefinePlugin({
   __VERSION__: JSON.stringify('12345')
})

应用代码

console.log(__VERSION__);

Answer 2

我会做得更简单,只需使用npm version patch (npm-version) (不需要插件)

package.json(构建前的路径版本示例)

{
  "version": "1.0.0",
  "scripts": {
    "build": "npm version patch && node build/build.js"
  }
}

因此,当你运行npm run build这将修补版本(1.0.0到1.0.1你的package.json)

额外奖励:您也可以将此添加到您的配置中(示例config/prod.env.js)

'use strict'
const pkg = require('./package.json')
module.exports = {
  NODE_ENV: '"production"',
  VERSION: pkg.version
}

然后你可以process.env.VERSION在我们的JS中的任何地方使用

Answer 3

有一个从package.json自动注入版本的插件.它可以将其作为注释注入html,css,js,也可以通过特殊标记https://www.npmjs.com/package/webpack-auto-inject-version注入

如何:

首先,您必须将它添加到您的项目中:

npm i webpack-auto-inject-version

然后你需要设置你的webpack配置:

var WebpackAutoInject = require('webpack-auto-inject-version');

module.exports = {
    plugins: [
        new WebpackAutoInject()
    ]
}

如果你想将它注入javascript,你应该在你的javascript文件中添加一个标记(在webpack编译期间将更改为版本)

var version = '[AIV]{version}[/AIV]';
console.log(version);

自动增加:

您可以将其设置为直接从webpack自动增加版本:

webpack --other-webpack-settings --major

webpack --other-webpack-settings -- minor

webpack --other-webpack-settings --patch

其中--other-webpack-settings等于您的自定义行args.简化 - 无论何时想要自动增加版本,都需要--major, - minor或--patch.

Answer 4

这是我的食谱,源自这个问题的其他答案.这使用了WebpackVersionFilePlugin和execa,现在对我很有用.

通过npm安装插件:

npm install webpack-version-file-plugin --save-dev
npm install execa --save-dev

webpack.config.js:

const WebpackVersionFilePlugin = require('webpack-version-file-plugin');
const execa = require('execa');

const gitHash = execa.sync('git', ['rev-parse', '--short', 'HEAD']).stdout;
const gitNumCommits = Number(execa.sync('git', ['rev-list', 'HEAD', '--count']).stdout);
const gitDirty = execa.sync('git', ['status', '-s', '-uall']).stdout.length > 0;

module.exports = {
// ... snip ...
plugins: [
    new WebpackVersionFilePlugin({
        packageFile: path.join(__dirname, 'package.json'),
        template: path.join(__dirname, 'version.ejs'),
        outputFile: path.join('build/ts/', 'version.json'),
        extras: {
            'githash': gitHash,
            'gitNumCommits': gitNumCommits,
            'timestamp': Date.now(),
            'dirty': gitDirty
        }
    }),
// ... snip ...

version.ejs(在项目根目录中):

{
    "name":       "<%= package.name %>",
    "buildDate":  <%= extras.timestamp %>,
    "version":    "<%= package.version %>",
    "numCommits": <%= extras.gitNumCommits %>,
    "hash":       "<%= extras.githash %>",
    "dirty":      <%= extras.dirty %>
}

到目前为止,运行此操作会为我们带来一个build/ts带有以下内容的version.json文件:

{
    "name":       "app name from package.json",
    "buildDate":  1518774257225,
    "version":    "2.0.1",
    "numCommits": 148,
    "hash":       "5a74b7a",
    "dirty":      false
}

该dirty标志指示构建是否包括未提交或未跟踪的更改.

我使用TypeScript,因此下面介绍如何将JSON文件转换为我的TypeScript代码.如果您没有TypeScript,我们仍然将问题简化为读取JSON文件.:-)

app.ts:

import * as appVersionJson from './version.json';

export const appVersion: AppVersion = <any>appVersionJson;

export interface AppVersion {
    /** application name as specified in package.json */
    readonly name: string;

    /** build timestamp in milliseconds since the epoch */
    readonly buildDate: number;

    /** application version as specified in package.json */
    readonly version: string;

    /** number of commits in the Git repo */
    readonly numCommits: number;

    /** latest Git commit hash */
    readonly hash: string;

    /** flag is set when uncommitted or untracked changes are present in the workspace */
    readonly dirty: boolean;
}

// ...snip...
// now just use it in methods, for example:
appVersion.version + '.' + appVersion.numCommits + ' (' + appVersion.hash + ')'

好吧 - 希望这提供了一些关于如何在代码中提供良好的构建号信息的线索.顺便说一句,npm版本是一个很好的方式来打破版本号,当这样工作.