Vraag Hoe kan ik een buildnummer injecteren met webpack?


Ik wil graag een buildnummer en versiegegevens injecteren in mijn project omdat het is gebouwd met webpack. Bijvoorbeeld, zodat mijn code iets als kan doen:

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

Wat zou de beste manier zijn om dat te genereren build-info module tijdens bouwtijd?


26
2017-07-09 20:24


oorsprong


antwoorden:


U kunt de DefinePlugin waarmee uw build-info beschikbaar wordt gemaakt met uw code:

config

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

App-code

console.log(__VERSION__);

40
2018-03-25 09:54



Er is een plug-in voor het automatisch injecteren van versie van package.json. Het kan het als een opmerking in html, css, js injecteren, maar ook als een waarde per speciale tag https://www.npmjs.com/package/webpack-auto-inject-version

Hoe:

Allereerst moet je het aan je project toevoegen:

npm i webpack-auto-inject-version

Dan moet je je webpack config instellen:

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

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

Als u het in javascript wilt injecteren, moet u een tag toevoegen aan uw JavaScript-bestand (dat tijdens de compilatie van de webpack wordt gewijzigd in versie)

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

Automatisch verhogen:

U kunt het instellen om de versie automatisch vanuit webpack te verhogen door:

webpack --other-webpack-settings --major

webpack --other-webpack-settings -- minor

webpack --other-webpack-settings --patch

Waar - andere-webpack-instellingen gelijk zijn aan uw aangepaste regel-args. Simplifing - je moet op - major, --minor of --patch wanneer je een versie automatisch wilt verhogen.


12
2017-10-24 07:19



Ik heb twee bestanden die ik distribueer met het buildnummer vanuit het oogpunt van git en npm (package.json). Ik wil dit nog steeds in mijn index.template.html opnemen in een metatag, maar heb dat nog niet bedacht (hoe kan ik een DEFINE maken van de bestandsinhoud of een cmd-uitvoer?).

Voor git gebruik ik webpack-shell-plugin om een ​​bestand te maken met de git info:

const WebpackVersionFilePlugin = require('webpack-version-file-plugin');
plugins: [
new WebpackShellPlugin({
      onBuildStart: [
        'git name-rev --name-only HEAD > dist/gitversion.txt',
        'git rev-list HEAD --count >> dist/gitversion.txt',
        'git rev-parse HEAD >> dist/gitversion.txt']
    }),

Voor npm voeg ik de opdracht npm version toe ("npm version patch / minor / major") om (1) te zorgen dat er geen openstaande niet-gecommiteerde wijzigingen in git zijn - deze mislukken als deze er zijn en (2) werken de package.json-versie bij en controleer het in git.

  "scripts": {
    "build": "npm run lint && npm run init && npm version patch && webpack --config webpack.config.js",

Ik distribueer dat vervolgens met behulp van slecht gedocumenteerde, waarschijnlijk met fouten, WebpackVersionFilePlugin.

const WebpackVersionFilePlugin = require('webpack-version-file-plugin');
new WebpackVersionFilePlugin({
      packageFile:path.join(__dirname, 'package.json'),
      outputFile: path.join('./dist/', 'version.json')
    }),

Deze sjabloon gebruiken in de bovenste map:

{
  "version" : {
    "name":      "<% package.name %>",
    "buildDate": "<%= currentTime %>",
    "version":   "<%= package.version %>"
  }
}

Noch "package.name" noch "naam" werken.

Het resultaat is twee bestanden in mijn ./dist/directory. gitversion.txt (tak, commit, tel van het hoofd):

fmwk/feathers
9cfe791a09d3d748e8120e0628
51

en version.json:

{
  "version" : {
    "name":      "",
    "buildDate": "Fri Oct 21 2016 11:10:12 GMT+0800 (PHT)",
    "version":   "0.6.2"
  }
}

3
2017-10-21 03:37



Hier is mijn recept, afgeleid van de andere antwoorden op deze vraag. Dit maakt gebruik van de WebpackVersionFilePlugin en execaen werkt nu prima voor mij.

Installeer de plug-ins via 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 (in project root):

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

Tot nu toe krijgt ons hier een version.json-bestand in build/ts met deze inhoud:

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

De dirty vlag geeft aan of de build niet-gecommiteerde of niet-traceerde wijzigingen bevatte.

Ik gebruik TypeScript, dus het volgende beschrijft hoe ik het JSON-bestand in mijn TypeScript-code kan krijgen. Als u geen TypeScript hebt, hebben we het probleem nog steeds beperkt tot het lezen van een JSON-bestand. :-)

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 + ')'

Oké, ik hoop dat dit wat meer aanwijzingen geeft over hoe je goede buildnummerinformatie in de code kunt vinden. Btw, npm-versie is een goede manier om de versienummers te bereiken, wanneer je op deze manier werkt.


3
2018-02-16 10:13



Ik zou meer doen eenvoudigere, gebruik gewoon npm version patch  (NPM-versie)  (geen plug-in vereist)

package.json (Voorbeeldpadversie voor het bouwen)

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

Dus als je rent npm run build dit zal de versie patchen1.0.0 naar 1.0.1 in je package.json)


Bonus: U kunt dit ook toevoegen aan uw config (voorbeeld config/prod.env.js)

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

Dan kun je gebruiken process.env.VERSION overal op onze JS


0
2018-06-08 11:03