Incluir el número de versión con Webpack

Recientemente se ha publicado una serie en la que se explicaba cómo se puede crear una librería JavaScript en Node usando para ellos TypeScript. Serie que complementa la publicada hace unos años acerca de cómo crear una librería en JavaScript. Algo que puede ser de interés a la hora de publicar librerías es incluir en las mismas el número de versión y otra información relativa a la compilación de forma automática. En el caso de trabajar con Webpack, como es el caso de la plantilla tslane, esto es algo que se puede realizar fácilmente con un par de ajustes. Por lo que vamos a ver como incluir en la plantilla tslane el número de versión con Webpack.

En esta entrada vamos a continuar trabajando con la plantilla tslane que se desarrolló en la serie “Creación de una librería TypeScript“. Plantilla que se puede descargar desde GitHub.

Definición de constantes globales en Webpack

Para incluir el número de versión automáticamente al compilar la liberara con Webpack vamos a usar el plugin DefinePlugin. Un plugin que permite crear constantes globales que se pueden configurar en tiempo de compilación. Para ello abriremos el archivo webpack.config.js y crearemos un objeto como el siguiente en el que se guardará el número de versión y el hash del repositorio:

const definePlugin = new webpack.DefinePlugin({
  VERSION: JSON.stringify(package.version),
  HASH: JSON.stringify(commitHash)
});

En el que se creará un objeto DefinePlugin con las propiedades VERSION y HASH. El número de versión se puede obtener del archivo package.json sin mayor problema, mientras que el hash del repositorio se puede obtener con el siguiente código:

const commitHash = require('child_process')
  .execSync('git rev-parse --short HEAD')
  .toString();

Estos valores serán constantes globales cuyos valores se obtienen en el momento de compilación. Al incluir estos cambios, el archivo webpack.config.js del proyecto quedará de la siguiente forma:

const path = require('path');
const webpack = require('webpack');

const package = require('./package.json');
const library = package.name;
const filename = `${package.name}_${package.version}.js`;
const mapname = `${package.name}_map_${package.version}.js`;

const commitHash = require('child_process')
  .execSync('git rev-parse --short HEAD')
  .toString();

const definePlugin = new webpack.DefinePlugin({
  VERSION: JSON.stringify(package.version),
  HASH: JSON.stringify(commitHash)
});

module.exports = [{
    name: 'map',
    entry: './src/index.ts',
    devtool: 'inline-source-map',
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: mapname,
        library: library,
        path: path.resolve(__dirname, 'bundles'),
    }
}, {
    name: 'production',
    entry: './src/index.ts',
    mode: 'production',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: filename,
        library: library,
        path: path.resolve(__dirname, 'bundles'),
    },
    plugins: [definePlugin]
}];

Exportación del número de versión

En el caso de que queramos exportar los valores se puede ir al archivo index.ts y crear un objeto que se exportará. Por ejemplo, un objeto version con las propiedades indicadas.

declare const VERSION: string;
declare const HASH: string;
 
export const version = {
  version: VERSION,
  build: HASH
};

Es importante declarar las constantes antes de usarlas para que produzca ningún error a la hora de compilar el código. Ahora una vez generado el archivo compilado se puede acceder al número de versión el hash utilizando la propiedad version que se encuentra disponible en la librería.

Conclusiones

En esta ocasión hemos visto cómo se puede automatizar la inclusión del número de versión con Webpack en nuestros proyectos TypeScript. Aunque el truco se puede usar sin problemas también en JavaScript sin muchos cambios.

El proyecto completo y actualizado se pude descargar desde su repositorio.

Imagen de Albrecht Fietz en Pixabay