Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.09.2020, 08:10
Аспирант
Отправить личное сообщение для Andrew K Посмотреть профиль Найти все сообщения от Andrew K
 
Регистрация: 15.11.2014
Сообщений: 50

Передача данных из Вебпака в Реакт
Здравствуйте. Есть приложение на Реакте в которое мне нужно передать режим работы: разработка или публикация.

В package.json есть две команды для запуска Вебпака. В каждую через переменные окружения передаётся режим.

package.json
"scripts": {
  "dev": "webpack-dev-server --env.mode=development",
  "build": "webpack          --env.mode=production"
}


В файле с настройками Вебпака переданный режим можно получить через env.mode.

webpack.config.js
module.exports = function(env) {
    return {
        mode: env.mode,
        entry: ...,
        output: ...,
        plugins: [],
    }
}


Как теперь этот режим передать Реакту? За несколько часов поисков мне удалось только найти способ передать в массив plugins вызов new webpack.DefinePlugin(), туда нужно передать объект, в объекте свойство 'process.env', а там будет объект. В этот объект можно передать любые названия свойств, но значения можно будет брать только если они присутствуют в process.env файла с настройками Вебпака.

webpack.config.js
module.exports = function(env) {
    return {
        mode: env.mode,
        entry: ...,
        output: ...,
        plugins: [
			new webpack.DefinePlugin(
	            {
	                'process.env': {
	                    'MODE': JSON.stringify(process.env.npm_package_scripts_build)
	                }
	            }
	        )
        ],
    }
}


Теперь в любом файле Реакта я, если обращусь к process.env, получу объект
{ MODE: "webpack --env.mode=production" }

Отсюда можно получить строку с режимом. Но всё это выглядит дико. Я не могу просто передать строку типа
new webpack.DefinePlugin(
    {
        'process.env': {
            'MODE': 'development'
        }
    }
)

Это не сработает. Как и другие способы найденные в Сети. Если ли нормальный прямолинейный способ отправки данных из Вебпака в Реакт?
Ответить с цитированием
  #2 (permalink)  
Старый 22.09.2020, 08:28
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,198

В документации же вроде описано? https://webpack.js.org/plugins/define-plugin/#usage
new webpack.DefinePlugin({
  'process.env.MODE': JSON.stringify('development')
})
Ответить с цитированием
  #3 (permalink)  
Старый 22.09.2020, 08:37
Аспирант
Отправить личное сообщение для Andrew K Посмотреть профиль Найти все сообщения от Andrew K
 
Регистрация: 15.11.2014
Сообщений: 50

Так в process.env в файлах Реакта будет пустой объект.
Да, по документации так, но у меня всегда он выводит пустой объект независимо от решения, которое я использовал.
Ответить с цитированием
  #4 (permalink)  
Старый 22.09.2020, 08:39
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,198

Andrew K,
надо обращаться как process.env.MODE
Ответить с цитированием
  #5 (permalink)  
Старый 22.09.2020, 08:43
Аспирант
Отправить личное сообщение для Andrew K Посмотреть профиль Найти все сообщения от Andrew K
 
Регистрация: 15.11.2014
Сообщений: 50

Сработало! Большое спасибо. Никогда бы не догадался у пустого объекта вывести свойство.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оптимальная передача данных Aido Node.JS 1 02.05.2020 04:13
Ajax передача большого количества данных diakon AJAX и COMET 3 29.05.2015 13:23
ajax передача данных с setInterval Segol Общие вопросы Javascript 0 07.07.2013 08:36
Двойная Фильтрация данных таблицы David0707 Общие вопросы Javascript 0 19.03.2012 11:00
передача данных между формами Yurii Общие вопросы Javascript 2 30.04.2008 19:52