Process.env на клиентской стороне ReactJS
Я понимаю, что process.env работает только на стороне сервера, я хочу использовать ту же концепцию, но на стороне клиента, потому что мое приложение развернуто на aws s3, я знаю, что мы можем поместить переменную в process.env из webpack, как я могу сделать то же самое, но на стороне клиента?
Ответы 2
Вы можете использовать webpack.DefinePlugin для помещения переменных в process.env. Ниже наиболее распространенный пример с React:
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': '"production"'
}
})
]
разве этого не достаточно?
Я создал этот пример, чтобы доказать, что это работает:
// webpack.config.js
const webpack = require('webpack');
module.exports = {
entry: './index.js',
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': '"production"'
}
})
]
};
// index.js
console.info(process.env);
console.info(process.env.NODE_ENV);
и выходной файл этой конфигурации выглядит следующим образом:
// ... some internal webpack init function ...
([function(e,n){console.info(Object({NODE_ENV:"production"})),console.info("production")}]);
поэтому, как вы могли заметить, значения заменены правильно.
Если вам нужна эта переменная, вы можете выполнить некоторую инициализацию, например:
global.myVar = process.env.NODE_ENV;
или что-то в этом роде.
вы можете получить доступ к переменным webpack со стороны клиента?
Что делает webpack, так это заменяет известные ему переменные (в моем примере process.env.NODE_ENV) на их значение. Поэтому, если вы используете эту переменную в своем коде, а затем этот код связан с веб-пакетом, он будет изменен на значение, указанное вами в конфигурации веб-пакета.
Я добавил пример к своему ответу, чтобы было понятно, как это работает.
Если вы используете responseJs и хотите получить этот global environment variable, у вас есть несколько вариантов:
1.- Создать глобальные переменные: Это не мой предпочтительный выбор, но все зависит от того, что вам действительно нужно. Если это что-то глобальное, доступ к которому требуется отовсюду, вы можете просто:
window.process = {
env: 'DEV',
....otherStuffs
}
2.- Используйте файлы cookie или локальное хранилище, если вы просто хотите сохранить информацию, вы можете использовать локальное или сеансовое хранилище (все зависит от ожидаемого поведения) или даже cookie, если вы хотите получить доступ с сервера.
3.- Я предпочитаю использовать redux, тогда вы можете создать редуктор global и включить туда всю информацию, которая вам нужна, вам нужно будет получить доступ к состоянию, чтобы получить эту информацию, но, возможно, это перебор.
В конце концов, вы должны проанализировать, что лучше всего подходит для вас.
Я считаю, что не проблема установить некоторые глобальные переменные, проблема в том, чтобы взять параметр выполнения или системную глобальную переменную и установить его в приложении. В процессе транспиляции в webpack - нет доступа к объекту window, и когда сборка завершена, вы не можете получить никакую переменную окружения (поскольку сборка выполняется исключительно на стороне браузера / клиента).
Пожалуйста, поясните, что вы хотите поместить в переменную
process.env. Как вы сказали, вы можете использовать webpack для предоставления этих значений. И они будут доступны на стороне клиента. Почему этого недостаточно?