2016-07-08 17 views
11

Web paketi ile yanıtla ve paketle yazılan bir web uygulamasına sahibim. Uygulama, çalışma zamanında içermek ve web paketi ile birlikte olmamak istediğim bir JSON yapılandırma dosyasına sahip.Webpack-React uygulamasında harici bir yapılandırma dosyası paketlenmeden nasıl yüklenir?

Uygulamaya giriş noktasında json-loader'ı kullanarak içeriğimi içe aktarıyorum ama bunu yapmak, uygulamanın uygulamaya gömülmesini zorluyor ve bir kez oluşturulduktan sonra config dosyasını güncelleyemiyorum.

Webpack.config.js dosyamı config.json dosyamı dışarıda bırakacak şekilde nasıl yapılandırabilirim, ancak yine de uygulamamda içe aktarmama izin verin? ben require.ensure kullanarak çalıştı

benim webpack.config.js arasında externals bölümünde eklenebilir eğer bilmiyorum ama şimdi gördüğüm config.json içeriği bindirildiğini yani bir modül değil 1.1.bundle.js dosyası ve config dosyasının değiştirilmesi hiçbir şey yapmaz. senin yapılandırma o kadar gizli olursa

let config; 
require.ensure(['./config.json'], require => { 
    config = require('./config.json'); 
}); 
+0

json dosyasını http ile fetch() veya node's http ile getirebilirsiniz. Uygulama bir düğüm sunucusu ve tarayıcıda çalışıyor mu? Ya da sadece tarayıcıda? –

cevap

1

Komut dosyasını harici olarak yüklemek için değiştirilmiş bir sürümünü kullanarak sona erdim. Uygulamam hemen yapılandırmayı gerektirmiyor, bu nedenle uyumsuz özellik burada bir fark yaratmıyor.

Bu yazılımı, <head> sayfamın üstüne, ortak bir yapılandırma dosyası içeren uygulamalar giriş sayfasının üstüne yerleştirdim.

<head> 
    ... other scripts 
    <script> 
     var config= window.config|| {}; 
     $.getJSON('config.json', function(response) { 
      config= response; 
     }); 
    </script> 
</head> 
<body> 
    <div id='root'/> 
    <script src='dist/app.bundle.js'></script> 
</body> 
1

app.js, sen

<script> 
    var initialState = { 
    config: { 
     idleTime: 120, 
     fetchStatusInterval: 8, 
     dataPath: 'somepath.json', 
    }, 
    }; 
    window.__INITIAL_STATE__ = initialState; 
</script> 
<script src="static/bundle.js"></script> 

Ve Gözlerinde farklı

ile yapılandırma almak uygulamayı tepki sizin index.html bu yapabileceğini
const applicationInitialState = window.__INITIAL_STATE__; 
const config = applicationInitialState.config; 
İlgili konular