Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   Передача данных из Вебпака в Реакт (https://javascript.ru/forum/library-toolkit-framework/81056-peredacha-dannykh-iz-vebpaka-v-reakt.html)

Andrew K 22.09.2020 08:10

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

В 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'
        }
    }
)

Это не сработает. Как и другие способы найденные в Сети. Если ли нормальный прямолинейный способ отправки данных из Вебпака в Реакт?

destus 22.09.2020 08:28

В документации же вроде описано? https://webpack.js.org/plugins/define-plugin/#usage
new webpack.DefinePlugin({
  'process.env.MODE': JSON.stringify('development')
})

Andrew K 22.09.2020 08:37

Так в process.env в файлах Реакта будет пустой объект.
Да, по документации так, но у меня всегда он выводит пустой объект независимо от решения, которое я использовал.

destus 22.09.2020 08:39

Andrew K,
надо обращаться как process.env.MODE

Andrew K 22.09.2020 08:43

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


Часовой пояс GMT +3, время: 21:12.