Подключение сгенерированных конвейером 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 следующим образом: