Переход с gulp на webpack: работа с переменными по NODE_ENV
Быстрый ответ
Для того чтобы передать переменные окружения в Webpack, следует воспользоваться DefinePlugin:
const webpack = require('webpack');
const envVars = { NODE_ENV: JSON.stringify(process.env.NODE_ENV) };
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': envVars
})
]
};
Значение NODE_ENV
через конфигурацию Webpack непосредственно устанавливается в process.env
. Обычно понадобиться разграничить разрабатываемый проект от его релизной версии. Следует использовать JSON.stringify
, потому что DefinePlugin только так работает. В итоге переменные окружения станут доступны в коде следующим образом: process.env.NODE_ENV
.
Особенности: Работа с множественными окружениями
Зачастую окружений больше, чем только разработка и продакшн. Они могут включать тестовые среды, интеграционные серверы или разные специальные конфигурации. Все эти задачи успешно решает DefinePlugin.
Специфические конфигурации для разных окружений
Можно легко настроить конфигурации для разных окружений:
const envConfig = require(`./config/${process.env.NODE_ENV}.config`);
new webpack.DefinePlugin(envConfig);
Таким образом может выглядеть ваш package.json
:
"scripts": {
"build:dev": "webpack --env development",
"build:prod": "webpack --env production"
}
Работаем с сложными переменными окружения
Если вам необходимо работать со сложными переменными окружения, DefinePlugin с этим справится:
new webpack.DefinePlugin({
'config': {
'endpoint': JSON.stringify(process.env.API_ENDPOINT),
'featureFlags': JSON.stringify(process.env.FEATURE_FLAGS)
}
});
Интеграция с HTML
Для того чтобы передать переменные в HTML, используйте html-webpack-plugin:
new HtmlWebpackPlugin({
templateParameters: {
'API_URL': JSON.stringify(process.env.API_URL)
}
})
Визуализация
Предложим следующую аналогию: ваш код – это корабль (🚢), который отправляется в разные моря:
Окружение | Конфигурация |
---|---|
Остров разработки | 💼 (dev.env ) |
Стейджинг-бухта | 📦 (staging.env ) |
Продакшн-раю | 🗝️ (prod.env ) |
Считайте Webpack капитаном, который командует кораблём по вашим инструкциям:
🚢 + 💼 ⇒ Остров разработки (Написание кода и быстрые тесты)
🚢 + 📦 ⇒ Стейджинг-бухта (Подготовка к выпуску версии)
🚢 + 🗝️ ⇒ Продакшн-рай (Релиз готового продукта)
Продвиньтесь с resolve.alias
Если вы перешли на Webpack из gulp, тогда вам стоит познакомиться с resolve.alias – идеальной функцией для создания синонимов и удобного управления модулями:
resolve: {
alias: {
Config$: path.resolve(__dirname, 'path/to/environment/config')
}
}
Алиас Config
в коде будет ссылаться на соответствующий конфигурационный файл окружения.
Учёт глобальных констант в линтерах
Линтеры могут выдавать предупреждения по поводу глобальных констант, добавляемых через Webpack. Укажите им о них, обновив конфигурацию ESlint таким образом:
"globals": {
"API_URL": true
}
Передача флагов окружения
Флаги окружения можно передавать через командную строку, используя --env
в webpack:
webpack --env.TEST=true --config webpack.config.js
Таким образом, вы можете разнообразить конфигурацию webpack, зависящую от различных условий и переменных.
Полезные материалы
- Переменные окружения | webpack – подробное руководство по использованию переменных окружения в Webpack.
- DefinePlugin | webpack – информация о плагине DefinePlugin.
- dotenv – npm – управление переменными окружения в Node.js.
- Составление конфигураций – как собирать конфигурации webpack.
- cross-env – npm – настройка переменных окружения для разных платформ.
- webpack-merge – npm – элегантное объединение конфигураций webpack.
- Как хранить настройки развертывания Node.js? – варианты управления конфигурационными файлами от профессионалов.