Я пытаюсь преобразовать угловое приложение из gulp в webpack. в gulp я использую gulp-preprocess для замены некоторых переменных на html-странице (например, имя базы данных) в зависимости от NODE_ENV. Каков наилучший способ достижения аналогичного результата с помощью веб-пакета?
306
Ответы:
Есть два основных способа добиться этого.
DefinePlugin
Обратите внимание, что это просто заменит совпадения "как есть". Вот почему строка в том формате, в котором она есть. У вас может быть более сложная структура, например, объект там, но вы поймете идею.
EnvironmentPlugin
EnvironmentPlugin
используетDefinePlugin
внутренне и сопоставляет значения среды для кодирования через него. Терсер синтаксис.кличка
В качестве альтернативы вы можете использовать конфигурацию через модуль с псевдонимами . Со стороны потребителя это будет выглядеть так:
Сама конфигурация может выглядеть так:
Скажем Давайте
process.env.NODE_ENV
естьdevelopment
. Это будет отображаться в./config/development.js
то время. Модуль, к которому он привязан, может экспортировать конфигурацию следующим образом:источник
JSON.stringify()
'process.env.NODE_ENV': `"${process.env.NODE_ENV || 'development'}"`
JSON.stringify('development')
как это может быть не очень полезно. Вместо этогоJSON.stringify(someVariable)
вполне может быть!NODE_ENV
сделать это. Как установить это зависит от вашей платформы.process.env.NODE_ENV
шаблон, и это работает.Просто еще один вариант, если вы хотите использовать только интерфейс
define
cli , просто используйте параметр webpack. Я добавляю следующий скрипт в мойpackage.json
:Так что мне просто нужно бежать
npm run build-production
.источник
Я исследовал несколько вариантов того, как устанавливать переменные, специфичные для окружающей среды, и получил следующее:
У меня есть 2 конфига webpack в настоящее время:
webpack.production.config.js
webpack.config.js
В моем коде я получаю значение API_URL таким (кратким) способом:
const apiUrl = process.env.API_URL;
РЕДАКТИРОВАТЬ 3 ноября 2016
В документации по Webpack есть пример: https://webpack.js.org/plugins/define-plugin/#usage
С ESLint вам нужно специально разрешить неопределенные переменные в коде, если у вас есть
no-undef
правило. http://eslint.org/docs/rules/no-undef вот так:РЕДАКТИРОВАТЬ 7 сентября 2017 г. (специфично для Create-React-App)
Если вам не нужно слишком много настраивать, проверьте Create-React-App: Create-React-App - Добавление переменных пользовательской среды . Под капотом CRA все равно использует Webpack.
источник
process.env
то,process.env.PORT
например, не разрешится, например,undefined
во время сборки веб-пакета, что означает, что вы больше не сможете переопределить порт из среды?Вы можете передать любой аргумент командной строки без дополнительных плагинов , используя
--env
так WebPack 2:Используя переменную в webpack.config.js:
Источник
источник
Вы можете напрямую использовать
EnvironmentPlugin
доступныйwebpack
доступ, чтобы иметь доступ к любой переменной среды во время транспортировки.Вам просто нужно объявить плагин в вашем
webpack.config.js
файле:Обратите внимание, что вы должны явно объявить имя переменных среды, которые вы хотите использовать.
источник
Чтобы добавить к куче ответов лично, я предпочитаю следующее:
Используя это, вы не столкнетесь с проблемой фан-переменных env или кроссплатформенности (с env vars). Все, что вы делаете, это запускаете обычный
webpack
илиwebpack -p
для dev или production соответственно.Ссылка: выпуск Github
источник
'process.env.NODE_ENV': JSON.stringify('production')
болееprocess: { env: { NODE_ENV: JSON.stringify('production') } }
. Использование последнего перезапишет объект процесса, что может нарушить совместимость с некоторыми модулями, которые ожидают определения других значений в объекте процесса.Так как мой Редактировать вышеупомянутый пост не был одобрен thevangelist , опубликовать дополнительную информацию.
Если вы хотите выбрать значение из package.json как определенный номер версии и получить к нему доступ через DefinePlugin внутри Javascript.
Затем импортируйте package.json внутри соответствующего webpack.config , получите доступ к атрибуту с помощью переменной import, затем используйте атрибут в DefinePlugin .
Например, определенная конфигурация в webpack.config использует METADATA для DefinePlugin:
Получите доступ к этому внутри любого машинописного файла:
Самый умный способ будет выглядеть так:
Спасибо Россу Аллену
источник
Просто еще один ответ, который похож на ответ @ zer0chain. Однако с одним отличием.
Настройка
webpack -p
достаточно.Это так же, как:
И это так же, как
Так что вам может понадобиться что-то подобное в
package.json
файле Node:Несколько советов от DefinePlugin :
Что это так, чтобы вы могли проверить, если вы печатаете
webpack --help
источник
Чтобы добавить к куче ответов:
Используйте ExtendedDefinePlugin вместо DefinePlugin
ExtendedDefinePlugin намного проще в использовании и задокументирована :-) ссылка
Поскольку DefinePlugin не хватает хорошей документации, я хочу помочь, сказав, что на самом деле он работает как #DEFINE в c # .
Таким образом, если вы хотите понять, как работает DefinePlugin, прочтите документацию c # #define. ссылка на сайт
источник
Я предпочитаю использовать файл .env для другой среды.
env.dev
в .env в корневую папкуenv.prod
в .envи в коде
использование
require('dotenv').config(); const API = process.env.API ## which will store the value from .env file
источник
Я обнаружил, что следующее решение проще всего настроить переменную среды для Webpack 2:
Например, у нас есть настройки веб-пакета:
Добавить переменную среды в Webpack:
Определите переменную плагина и добавьте ее в
plugins
:Теперь при запуске команды webpack передайте в
env.NODE_ENV
качестве аргумента:Теперь вы можете получить доступ к
NODE_ENV
переменной в любом месте вашего кода.источник
Начиная с Webpack v4, простая настройка
mode
в вашей конфигурации Webpack установитNODE_ENV
для вас (черезDefinePlugin
). Документы здесь.источник
Вот способ, который сработал для меня и позволил мне сохранить мои переменные среды DRY, повторно используя файл json.
источник
Я не большой поклонник ...
... так как он не обеспечивает никакой безопасности. вместо этого вы заканчиваете тем, что усиливаете свои секретные вещи, если только вы не добавите веб-пакет в gitignore - есть лучшее решение.
В основном с этим конфигом, как только вы скомпилируете свой код, все переменные процесса env будут удалены из всего кода, не будет ни одного process.env.VAR благодаря плагину babel
transform-inline-environment-variables
PS, если вы не хотите заканчивать работу с целой кучей неопределенностей, убедитесь, что вы вызываете env.js до того, как webpack вызывает babel-loader, поэтому это первое, что вызывает webpack. массив vars в файле babel.config.js должен соответствовать объекту в env.js. теперь есть только одна косилка. добавьте.env
файл, поместите туда все свои переменные env, файл должен находиться в корне проекта или вы можете свободно добавлять его куда угодно, просто убедитесь, что в файле env.js указано то же место, а также добавьте его в gitignoreЕсли вы хотите увидеть весь babel + webpack + ts, возьмите его с ног
https://github.com/EnetoJara/Node-typescript-babel-webpack.git
и та же логика применяется, чтобы реагировать и все остальные 💩
env.js
файл webpack без плагинов тролль
babel.config.js
источник
Я не знаю почему, но никто не упоминает самое простое решение. Это работает для меня для nodejs и grunt. Поскольку для многих людей веб-пакет может сбить с толку, вы можете просто использовать следующую строку:
process.env.NODE_ENV = 'production';
С вышеупомянутым решением вам не нужно использовать envify или webpack. Иногда простое жестко закодированное решение может работать для некоторых людей.
источник