Подключение сгенерированных конвейером Azure номеров сборок через Webpack

Я потратил много времени на поиски, но не смог найти простого решения для передачи сгенерированной переменной моему приложению во время сборки. Надеюсь, это поможет кому-то еще потратить немного меньше усилий.

Проблема

Номера сборок создаются каждый раз, когда конвейер непрерывной интеграции Azure запускается для сборки моего веб-приложения. Мне нужно было передать их в Vue.js, чтобы их можно было отобразить в интерфейсе. Это помогает команде QA понять, какую «версию» они видят, поскольку все ошибки/задачи и т. д. легко привязываются к сборке пайплайна. Изначально я планировал просто использовать GIT tag, сгенерированный Azure, при успешной сборке. Но тег появляется после сборки, поэтому каждая сборка всегда отставала как минимум на один тег.

Поэтому я решил использовать переменную, сгенерированную в процессе сборки. Однако в Azure (может отличаться в других облачных средах CI/CD) я изо всех сил пытался установить переменные среды сервера сборки таким образом, чтобы они сохранялись и могли быть прочитаны в моей конфигурации через Webpack.

Решение

Я могу легко запустить сценарий Bash в конвейере Azure, поэтому я решил просто добавить переменную командной строки при запуске сценария сборки. Преимущество сценария Bash заключается в том, что он ТАКЖЕ имеет доступ к системе переменных Azure.

В Azure

Я создал конвейерную задачу сценария Bash И добавил переменную среды: (обратите внимание, что она связана с системной переменной конвейера для сгенерированного номера сборки). Я попытался просто добавить $(build.buildNumber) в свой сценарий командной строки, но сохранил получение ошибок.

Затем я добавил команду сборки NPM во встроенный скрипт: npm run build -- --env dev --ver $BUILDNUM (обратите внимание, что $BUILDNUM поступает из конвейера)

В вебпаке

Вернуть переменную командной строки как нечто полезное оказалось сложнее, чем я ожидал. По сути, переменные командной строки, называемые argv, представляют собой массив с переменной длиной и положением объекта (в зависимости от порядка их ввода). Вот пример:

С этим трудно справиться, поэтому немного поохотившись, я обнаружил модуль узла (Webpack запускается в узле для сборки), который справляется со всей этой сложностью. Яргс ищет --varName value Отсюда и структура сверху в Азуре. Далее мы будем использовать Webpack DefinePlugin для создания контента, который можно использовать в Vue. Думайте о `DefinePlugin` как о поиске/замене текста во время сборки. Итак, внутри любого файла Webpack касается VERSION => argv.ver => --ver value (cmd var) => $BUILDNUM (var, который я определил в сценарии Bash) => $(build.buildNumber) (из Azure Pipeline). Да, это похоже на переменную Inception…

Я могу использовать все это в своем Webpack.config.js следующим образом: