webpack - tipos - ¿Cómo puedo inyectar un número de compilación con un paquete web?

tecnica de inyeccion intramuscular pdf

Question

Me gustaría agregar un número de compilación y la información de la versión a mi proyecto, ya que está construido con un paquete web. Por ejemplo, para que mi código pueda hacer algo como:

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

¿Cuál sería la mejor manera de generar ese módulo de build-info de construcción en tiempo de compilación?

Answer 1

Aquí está mi receta, derivada de las otras respuestas a esta pregunta. Esto hace uso de WebpackVersionFilePlugin y execa , y funciona muy bien para mí en este momento.

Instale los complementos a través de 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 (en la raíz del proyecto):

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

Hasta ahora, ejecutar esto nos da un archivo version.json en build/ts con este contenido:

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

La bandera dirty indica si la compilación incluye cambios sin confirmar o sin seguimiento.

Uso TypeScript, por lo que a continuación se describe cómo obtener el archivo JSON en mi código TypeScript. Si no tiene TypeScript, aún hemos reducido el problema a la lectura de un archivo 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 + '')''

Bien, espero que esto proporcione algunas pistas sobre cómo tener disponible una buena cantidad de información de compilación en el código. Por cierto , la versión npm es una buena forma de encontrar los números de versión cuando se trabaja así.

Answer 2

Hay un complemento para inyectar automáticamente la versión de package.json. Puede inyectarlo en html, css, js como un comentario, pero también como un valor mediante una etiqueta especial https://www.npmjs.com/package/webpack-auto-inject-version

Cómo:

Antes que nada, debes agregarlo a tu proyecto:

npm i webpack-auto-inject-version

Entonces necesitas configurar tu configuración de paquete web:

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

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

Como quiera insertarlo en javascript, debe agregar una etiqueta dentro de su archivo javascript (que se cambiará a versión durante la compilación webpack)

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

Aumento automático:

Puede configurarlo para aumentar automáticamente la versión directamente desde el paquete web de la siguiente manera:

webpack --other-webpack-settings --major

webpack --other-webpack-settings -- minor

webpack --other-webpack-settings --patch

Donde --other-webpack-settings es igual a sus argumentos de línea personalizados. Simplificando - necesitas att --major, --minor o --patch cada vez que quieras aumentar automáticamente una versión.

Answer 3

Lo haría más simple , solo use el npm version patch npm) (no se requiere un complemento)

package.json (Ejemplo de ruta de acceso antes de construir)

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

Entonces, cuando ejecute npm run build esto corregirá la versión ( 1.0.0 a 1.0.1 en su paquete.json)

Bonificación: también puede agregar esto a su configuración (ejemplo config/prod.env.js )

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

Entonces puedes usar process.env.VERSION cualquier parte de nuestro JS

Answer 4

Puede usar DefinePlugin que hará que su información de compilación esté disponible en línea con su código:

Config

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

Código de aplicación

console.log(__VERSION__);

Answer 5

Tengo dos archivos que distribuyo que tienen el número de compilación desde el punto de vista de ambos git y npm (package.json). Todavía me gustaría incluir esto en mi index.template.html en una metaetiqueta, pero aún no me he dado cuenta (¿cómo puedo hacer una DEFINE a partir del contenido del archivo o una salida de cmd?).

Para git, uso webpack-shell-plugin para hacer un archivo con la información de git:

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'']
    }),

Para npm, agrego el comando de versión npm ("parche de versión npm / menor / mayor") para (1) asegurar que no haya cambios no confirmados pendientes en git - falla si hay alguno y (2) actualiza la versión de package.json y verifíquelo en git.

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

Luego distribuyo eso usando WebpackVersionFilePlugin mal documentado, probablemente con errores.

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

Usando esta plantilla en el directorio superior:

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

Ni "package.name" ni "name" funcionan.

El resultado es dos archivos en mi ./dist/directory. gitversion.txt (branch, commit, count from head):

fmwk/feathers
9cfe791a09d3d748e8120e0628
51

y version.json:

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