Как в React использовать переменные, полученные из Node.js?

Question

[heIIfire]

Ну конкретно - как в JSX использовать переменные, как это делается например в EJS <%=user%>?

Answer 1

[Максим]

Если используете webpack, можете использовать webpackDefinePlugin
Например:

new webpack.DefinePlugin({
      'ENV_API_ROOT_V1': JSON.stringify(process.env.ENV_API_ROOT_V1),
      'HTTP_PROTOCOL': JSON.stringify(process.env.HTTP_PROTOCOL),
      'WS_PROTOCOL': JSON.stringify(process.env.WS_PROTOCOL),
    }),

старт вашей сборки, будет выглядеть примерно так:

cross-env ENV_API_ROOT_V1=my_url_for_Api.com HTTP_PROTOCOL=https WS_PROTOCOL=wss webpack --progress --config ./webpack.prod.config.js

в таком случае вам будут доступны в файлах переменные: ENV_API_ROOT_V1, HTTP_PROTOCOL, WS_PROTOCOL

Comments

[heIIfire]

а на что указывает ENV_API_ROOT_V1 ? в общем где об этом прочитать? можете ссылку дать? спасибо

[Максим]

heIIfire, он указывает на мой апи урл. Который я сам передаю. Эти переменные просто нужны вам. То есть, у меня например 2 билда: тестовый и продакшен. Когда я делаю тестовый билд, я грубо говоря запускаю: cross-env API_ROOT='test.com' webpack, а когда продакшен билд:

cross-env API_ROOT='my-production-backend-api-url.com' webpack

Вы лучше вопрос задайте более конкретно, не понятно это "полученные из Node.js?", как получены? на каком этапе? до сборки или в момент работы приложения? может мы не про то разговариваем.

Answer 2

[Артем Кисленко]

Можно добавить их в глобальный объект window, или в шаблоне создать json-объект и распарситьь его или получить его через Ajax

Answer 3

[Ваге]

https://www.npmjs.com/package/babel-plugin-transfo...