Конфигурация окружения при времени сборки с npm

Question

Существует несколько сообщений в блоге, в которых объясняется, почему переход от ворчания или gulp к зданию с помощью простой npm является хорошей идеей, например, такой: Cory Hourse или этот Keith Cirkle. Одно из этих сообщений в блоге не объясняет, как я могу легко выполнить настройку среды. Например, общее требование состоит в том, чтобы иметь разные местоположения REST API. Во время разработки сервер может работать на localhost:8080, но при его производстве он должен получить доступ через относительный URL-адрес, такой как /api или /rest/api, и порт или протокол отличаются для разработки и производства.

Для этого есть несколько решений. Например, grunt поддерживает шаблонные строки, такие как <% %> и <%= %>, а также есть плагины для ворчания или gulp, как в этом вопросе о grunt-ng-config. Эти решения являются специфическими для Angular (которые я использую), но мне не нужно искать решение AngularJS.

Я также знаю плагин angular-environment, но, насколько я вижу, это делает конфигурацию во время выполнения, и я ищу что-то, что может это сделать во время сборки.

Так что я ищу, это то, что позволяет мне настроить мое приложение во время сборки либо путем замены некоторых строк шаблонов, либо путем создания файла Javascript с некоторыми переменными, которые я могу прочитать во время выполнения.

Обязательным условием является то, что он должен быть независимым от ОС. Поэтому я не хочу использовать специальные инструменты UNIX, такие как sed для перезаписи файла. И из-за разного расширения переменной (например, % против $) решение не должно полагаться на переменные среды.

Есть ли существующее решение или передовая практика для этого?

Answer 1

из-за различный переменное расширение (например,% по сравнению с $) решение должно не полагаться на переменных окружения

это отсекает ваше лучшее решение. Почему бы не полагаться на env vars? узел обеспечивает

process.env 

для доступа к env vars. Вы можете создавать пользовательские задачи gulp/grunt, которые используют process.env вместо «разного расширения переменных», о котором вы говорите.

Вы можете использовать, например, Jade templating для передачи значений env var в HTML во время сборки. Это будет генерировать ваш index.html «на лету» как часть процесса сборки и добавлять соответствующие классы на основе env vars.

Например, в соответствии с значением env var вы можете установить класс в теге HTML.

Это может отражать покупатель.

Тогда вы могли бы иметь некоторые CSS

.customer1 .myimage { 
    background-image: url("customer1.png"); 
} 

.customer2 .myimage { 
    background-image: url("customer2.png"); 
} 

или вы можете использовать JavaScript, чтобы определить, какой класс был добавлен в голову во время сборки.