110

React.js'de yeniyim, veriyi sunucudan aldığım ve şu şekilde kullandığım bir bileşen uyguladım:

CallEnterprise:function(TenantId){


    fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) 
    {
        EnterprisePerspectiveActions.getEnterprise(enterprises);
    }).catch(function()
    {
        alert("There was some issue in API Call please contact Admin");
        //ComponentAppDispatcher.handleViewAction({
        //    actionType: MetaItemConstants.RECEIVE_ERROR,
        //    error: 'There was a problem getting the enterprises'
        //});
    });
},

URL'yi yapılandırma dosyasında saklamak istiyorum, bu nedenle bunu Test sunucusunda veya Üretimde dağıttığımda URL'yi js dosyasında değil yapılandırma dosyasında değiştirmem gerekiyor ancak yapılandırma dosyasını react.js'de nasıl kullanacağımı bilmiyorum

Lütfen bunu nasıl başarabilirim bana rehberlik edebilir mi?

— Dhaval Patel
kaynak

1

Js kodunu derlemek için web paketi veya bir araç kullanıyor musunuz?

— Petr Bela

Bu değeri, JavaScript'inizde mevcut olan global bir değer olarak bir ortam değişkeninden web sayfasına göndermek, ayarlamak ve okumak yaygındır. Ardından, verileri almak için kullanın.

— WiredPrairie

1

@PetrBela: evet bundle.js oluşturmak için webpack kullanıyorum ancak .net'te web.config gibi yapılandırma dosyası alıyorum

— Dhaval Patel

130

Webpack ile çevreye özel yapılandırmayı sahaya koyabilirsiniz externals.webpack.config.js

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {
    serverUrl: "https://myserver.com"
  } : {
    serverUrl: "http://localhost:8090"
  })
}

Yapılandırmaları ayrı bir JSON dosyasında saklamak istiyorsanız, bu da mümkündür, bu dosyayı isteyebilir ve şunları atayabilirsiniz Config:

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))
}

Daha sonra modüllerinizde yapılandırmayı kullanabilirsiniz:

var Config = require('Config')
fetchData(Config.serverUrl + '/Enterprises/...')

React için:

import Config from 'Config';
axios.get(this.app_url, {
        'headers': Config.headers
        }).then(...);

Kullanım durumunuzu kapsıyor mu emin değilim ama bizim için oldukça iyi çalışıyor.

— Petr Bela
kaynak

2

Rica ederim. BTW o zamandan beri sözdizimi hatalarını önlemek için JSON kullanmanın daha iyi olduğunu öğrendik. Kodu buna göre güncelledim.

— Petr Bela

2

Hmm, JSON dosyasını ayrıştırmayı gerektirdiğini fark etmedim. Çünkü externalsbir kod değerlendirilecek beklentiden, sen JSON stringify gerekir.

— Petr Bela

21

bu benim için çalışmıyor, şu hatayı alıyorum: [Hata:

— Require

4

Ya webpack'in ayrı yapılandırma dosyasını output.bundle.js içinde paketlememesini istersem? Paketten ayrı olacaksa, yine de ('Yapılandırma') isteyebilir miyim? Teşekkürler

— Barny

3

Herhangi biriniz bunu nasıl çalıştırdı? Bunu tam olarak önerildiği gibi yapıyorum ve @amgohan ile aynı olan 'Yapılandırma modülü bulunamıyor' mesajı alıyorum.

— ceebreenk

77

Create React App kullandıysanız, bir .env dosyası kullanarak bir ortam değişkeni ayarlayabilirsiniz. Belgeler burada:

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

Temelde proje kökünde .env dosyasında buna benzer bir şey yapın.

REACT_APP_NOT_SECRET_CODE=abcdef

Bileşeninizden şununla erişebilirsiniz:

process.env.REACT_APP_NOT_SECRET_CODE

— aris
kaynak

26

sadece değişken adınızın REACT_APP_

— şununla

React şablonuyla oluşturulmuş bir ASP.NET Core uygulamam var ve tek yaptığım 'ClientApp' klasörünün altına boş bir dosya eklemek ve içine koymak REACT_APP_MYSETTING=value, ardından process.env.REACT_APP_MYSETTINGJSX kodumdaki gibi ona başvurmak ve işe yaradı. Teşekkürler!

— Neo

.env, create-react-app projesinde benim için hiç çalışmıyor

— user8620575

3

Kök dizininize .env ekledikten sonra projenizi npm'de yeniden başlatmanız gerekecek

— foyss

Bu bir anti-model gibi görünüyor. API uç noktaları, bir ortam değişkeninde tanımlanması gereken sırlar değildir. Bunlar, uygulamanın tanımının bir parçasıdır.

— Rob

2

Hangi kurulumu kullanırsanız kullanın dotenv paketini kullanabilirsiniz. Proje kökünüzde bir .env oluşturmanıza ve anahtarlarınızı böyle belirtmenize olanak tanır

REACT_APP_SERVER_PORT=8000

Uygulamalarınızın giriş dosyasında sadece dotenv () çağrınız; tuşlara böyle erişmeden önce

process.env.REACT_APP_SERVER_PORT

— Joshua Underwood
kaynak

1

ile başlayarak anahtarlarınızı belirtmeniz gerektiğini düşünmeme rağmenREACT_APP_

— HenryM

1

Bir .properties dosyanız veya .ini dosyanız olması durumunda

Aslında, bunun gibi anahtar değer çiftlerine sahip herhangi bir dosyanız varsa:

someKey=someValue
someOtherKey=someOtherValue

Bunu, properties-reader adlı bir npm modülü ile web paketine aktarabilirsiniz.

React'i zaten bir application.properties dosyası bulunan Java Spring çerçevesiyle entegre ettiğim için bunu gerçekten yararlı buldum. Bu, tüm yapılandırmayı tek bir yerde bir arada tutmama yardımcı oluyor.

Bunu package.json'daki bağımlılıklar bölümünden içe aktarın

"properties-reader": "0.0.16"

Bu modülü üstte webpack.config.js'ye aktarın

const PropertiesReader = require('properties-reader');

Özellikler dosyasını okuyun

const appProperties = PropertiesReader('Path/to/your/properties.file')._properties;

Bu sabiti config olarak içe aktarın

externals: { 'Config': JSON.stringify(appProperties) }

Kabul edilen cevapta belirtildiği gibi kullanın

var Config = require('Config') fetchData(Config.serverUrl + '/Enterprises/...')

— Fangming
kaynak

3

Webpack.config.js hakkındaki 2. adımınız, eğer biri create-react-app kullanıyorsa, webpack yapılandırması yoktur (veya gizlidir). Bu durumda nasıl devam edilir?

— katıldıotnot

Yapılandırma dosyası nasıl saklanır ve React kullanılarak nasıl okunur

Bir .properties dosyanız veya .ini dosyanız olması durumunda