Как я могу вставить номер сборки с помощью webpack?

Ответ 1

Вы можете использовать DefinePlugin, который сделает вашу информацию о сборке встроенной в ваш код:

конфиг

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

Код приложения

console.log(__VERSION__);

Ответ 2

Я бы сделал больше проще, просто используйте npm version patch (npm-версия) (плагинне требуется)

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

Обновлено: или просто используйте process.env.npm_package_version без необходимости включать package.json

Ответ 3

Существует плагин для автоматической вставки версии из package.json. Он может вставлять его в HTML, CSS, JS как комментарий, а также как значение с помощью специального тега webpack-auto-inject-version.

.Как:

Прежде всего, вы должны добавить его в свой проект:

npm i webpack-auto-inject-version

Затем необходимо настроить конфигурацию веб-пакета:

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

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

Поскольку вы хотите внедрить его в javascript, вы должны добавить тег в свой файл javascript (который будет изменен на версию во время компиляции веб-пакета)

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

Автоматическое увеличение:

Вы можете настроить его на автоматическое увеличение версии прямо из веб-пакета:

webpack --other-webpack-settings --major

webpack --other-webpack-settings -- minor

webpack --other-webpack-settings --patch

Где --other-webpack-settings равен вашим пользовательским аргументам строки. Упрощение - вам нужно указывать --major, --minor или --patch всякий раз, когда вы хотите автоматически увеличить версию.

Ответ 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 %>
}

До сих пор, запустив это, мы получаем файл version.json в build/ts с таким содержимым:

{
    "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 - это хороший способ увеличить номера версий при такой работе.

Ответ 5

У меня есть два файла, которые я распространяю, которые имеют номер сборки с точки зрения как git, так и npm (package.json). Я все равно хотел бы поместить это в свой index.template.html в метатег, но еще не понял этого (как я могу сделать DEFINE из содержимого файла или вывода cmd?).

Для git я использую webpack-shell-plugin для создания файла с 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']
    }),

Для npm я добавляю команду версии npm ( "npm version patch/minor/major" ) в (1), чтобы не было никаких незафиксированных изменений в git - она ​​терпит неудачу, если есть и (2) обновление версию package.json и проверьте его на git.

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

Затем я распространяю это, используя плохо документированный, возможно, глючный, WebpackVersionFilePlugin.

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

Использование этого шаблона в верхнем каталоге:

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

Ни "package.name", ни "name" не работают.

В результате получается два файла в моем. /dist/directory. gitversion.txt(ветвь, фиксация, подсчет с головы):

fmwk/feathers
9cfe791a09d3d748e8120e0628
51

и version.json:

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

Ответ 6

Я не мог заставить это работать с TypeScript, поэтому я помог себе, создавая файл при каждой компиляции.

webpack.config.js

const fs = require('fs'); 
const path = require('path'); 
fs.writeFileSync(path.resolve(path.join(__dirname, 'src/version.ts')), 
'// This file is auto-generated by the build system. 
const BundleVersion = "${ new Date().toISOString().substr(0, 10) }"; 
export default BundleVersion; 
'); 

Тогда я просто import BundleVersion from './version'; и убедитесь, что он действительно используется где-то (console.log или где-то его разоблачает), чтобы он не был вытряхнут из дерева, и чтобы он, timestamp (или версия) в пакете, создавался во время компиляции (прямо отсюда чтобы прочитать package.json и при необходимости использовать версию пакета).