Webpack ile önbellekleme, indeks kaynak kodunun içindeki [hash] değeri, React.js

kullanarak bir izomorfik uygulama yapıyorum. Tamamen reaksiyonla inşa edilmiştir, yani html tabanı da reaksiyona girer.Webpack ile önbellekleme, indeks kaynak kodunun içindeki [hash] değeri, React.js

Kök html'imi bir uygulama bileşeni olarak kullanıyorum. Ben WebPack ile proje oluştururken, ben karma dahil etmek/bundle.js js değiştirmeniz gerekiyor

... 
var AppTemplate = React.createClass({ 
    displayName: 'AppTemplate', 
    render: function() { 
     return (
      <html> 
        <head lang="en"> 
         <title>hello</title> 
         <link rel="stylesheet" href='/css/style.css' /> 
        </head> 
        <body> 
         <RouteHandler {...this.props}/> 
         <script type='text/javascript' src='/js/bundle.js' /> 
        </body> 
       </html> 
     ); 
    } 
}); 
... 
module.exports = AppTemplate;

Bu şuna benzer.

Web paketi, bittikten sonra stats.json'u teslim eder. Ama yapım süresi boyunca hash elde etmem gerekiyor. ideal olarak inşa js'ye sağ karma referansı enjekte ederdi

... 
var AppTemplate = React.createClass({ 
    displayName: 'AppTemplate', 
    render: function() { 
     return (
      <html> 
        <head lang="en"> 
         <title>hello</title> 
         <link rel="stylesheet" href='/css/style.css' /> 
        </head> 
        <body> 
         <RouteHandler {...this.props}/> 
         <script type='text/javascript' src='/js/bundle.{__HASH__}.js' /> 
        </body> 
       </html> 
     ); 
    } 
}); 
... 
module.exports = AppTemplate;

ben böyle bir şey yapmak özellik bayrakları kullanmayı düşünüyorum.

Kendini referans gösterdiğinden biraz zor. Bunu yapmanın daha iyi bir yolu var mı? Webpack'in bitiminden sonra yapılan kodu değiştirmek ters tepki veriyor. Ayrıca, istemcinin yalnızca bundle.js'yi istemesini, ancak düğüm sunucumun hashed dosyasına sahip olmasını istedim.

Bu önbellek için uygun çözüm ne olurdu? Bunun yerine onu uygulamada işlemek için çalışmakla

kaynak

2015-05-18 Federico

, ben en iyi çözüm app içine webpack varlıklarını geçmektir bulundu. Bu doğrudan sahne veya akı ile olabilir.

Bu şekilde kodunuz bir değişkenle işlenir. Değişkeninizin değeri, oluşturma işlemi için alakasız.

... 
var AppTemplate = React.createClass({ 
    displayName: 'AppTemplate', 
    render: function() { 
     return (
      <html> 
        <head lang="en"> 
         <title>hello</title> 
         <link rel="stylesheet" href='/css/style.css' /> 
        </head> 
        <body> 
         <RouteHandler {...this.props}/> 
         <script type='text/javascript' src={this.props.jsFile} /> 
        </body> 
       </html> 
     ); 
    } 
}); 
... 
module.exports = AppTemplate;

Böyle bir şey.

kaynak

2015-05-18 22:32:05 Federico

ExtendedAPIPlugin aradığınız şey olabilir Paketinizdeki bir __webpack_hash__ değişken ekler.

kaynak

2015-05-19 09:56:55

Tam olarak aradığım şey buydu. – Federico

Tam HTML'nizi istemcide hiç oluşturmamalısınız. Kafanızdaki ve uygulamanızın dışındaki her şey bedende sadece sunucudan gönderilmelidir. Bu şekilde probleminiz hemen çözülür, çünkü istemci tarafındaki Javascript'in hangi dosyada olduğunu bilmesi gerekmez ve sunucuda istatistiklerin hazır olmasını bekleyebilirsiniz.

kaynak

2015-05-19 14:56:47 Ambroos

Bu bir izomorfik uygulamadır. Bu tepki uygulaması, sunucuda React.renderToString() 'ile işleniyor. Bu, bir dizeyi (veya yalnızca bileşenin görüntü bölümünü) oluşturur. Başı ve uygulamanın dışındaki her şeyi içerir ve sunucudan aşağı doğru gönderilir. İstemcide, aynı tepki uygulamasıyla belgeyi 'tekrar sulandırmak' zorundasınız. İstemcide, görünümü + işlevsellik/olay işleyicileri oluşturacak olan React.render() işlevini kullanın. – Federico

Elbette, ancak istemcinin tam HTML'sini (tüm komut dosyaları dahil) yeniden sulandırmaya çalışmamalısınız, bu da gereksizdir. Vücudunuzun dışında hiçbir şey çalışma zamanında değişmez. İyi bir örnek olarak burada bir göz atın: https://github.com/yahoo/flux-examples/tree/master/fluxible-router Temelde: bir dizeye uygulamayı gerçek Tepki senin render vücudunuzun içinde bir uygulama div oluşturma ve app div'in içine yazdırın. Ardından, dış HTML'yi oluştur ve oluşturulan uygulama div'ini içine koy. Ardından uygulamanızı uygulama div'sine yeniden sulayın. Oldukça büyük bir Fluxible uygulaması oluşturdum. Bu, [hash] dahil, harika çalışıyor! – Ambroos

Webpack ile önbellekleme, indeks kaynak kodunun içindeki [hash] değeri, React.js

cevap

İlgili konular