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"
}
}