Buforowanie z pakietem Webpack, [hash] wartość wewnątrz kodu źródłowego indeksu, przy użyciu React.js

Buduję aplikację izomorficzną. Jest całkowicie zbudowany z reakcją - a mianowicie, baza html również reaguje.Buforowanie z pakietem Webpack, [hash] wartość wewnątrz kodu źródłowego indeksu, przy użyciu React.js

Mam mój html jako składnik aplikacji.

Wygląda to mniej więcej tak:

... 
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;

Kiedy budować projektu z WebPack, muszę zastąpić js/bundle.js dołączyć hash.

Webpack dostarcza stats.json po zakończeniu. Ale muszę mieć dostęp do skrótu podczas budowania.

Myślałem o użyciu flagi fabularnych zrobić coś takiego:

... 
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;

Które idealnie wstrzyknąć odpowiednią nazwę skrótu do wbudowanego js.

To trochę trudne, ponieważ jest to samo-odniesienie. Czy istnieje lepszy sposób na zrobienie tego? Modyfikacja zbudowanego kodu po zakończeniu WebPacka przynosi efekt przeciwny do zamierzonego. Myślałem również o tym, aby klient po prostu zażądał pliku bundle.js, ale mój serwer węzła powinien obsługiwać mieszany plik.

Jakie byłoby właściwe rozwiązanie tego buforowania?

Źródło

2015-05-18 Federico

Zamiast próbować renderować go w aplikacji, stwierdziłem, że najlepszym rozwiązaniem jest przekazanie zasobów Webpack do aplikacji. Może to być albo bezpośrednio przez rekwizyty, albo przez twój strumień.

W ten sposób kod jest renderowany za pomocą zmiennej. Wartość twojej zmiennej jest nieistotna dla procesu budowania.

... 
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;

Coś w tym stylu.

Źródło

2015-05-18 22:32:05 Federico

Zmienna ExtendedAPIPlugin dodaje zmienną __webpack_hash__ do pakietu, który może być tym, czego szukasz.

Źródło

2015-05-19 09:56:55

To było dokładnie to, czego szukałem. – Federico

Nie powinieneś renderować swojego pełnego kodu HTML na kliencie. Twoja głowa i wszystko, co znajduje się poza twoją aplikacją, powinno być wysłane z serwera. W ten sposób Twój problem zostanie rozwiązany od razu, ponieważ JavaScript po stronie klienta nie musi wiedzieć, w jakim znajduje się pliku, a na serwerze możesz po prostu poczekać, aż statystyki będą gotowe.

Źródło

2015-05-19 14:56:47 Ambroos

Jest to aplikacja izomorficzna. Ta aplikacja reagująca jest renderowana na serwerze za pomocą 'React.renderToString()'. To renderuje ciąg (lub tylko część widoku komponentu). Zawiera głowę i wszystko poza aplikacją i jest wysyłana z serwera. Na kliencie musisz "nawodnić" dokument za pomocą dokładnie tej samej aplikacji reagowania. Na kliencie wykonujesz 'React.render()', który wyrenderuje widok + funkcje obsługi zdarzeń/zdarzeń. – Federico

Oczywiście, ale nie powinieneś próbować ponownie nawadniać pełnego kodu HTML klienta (w tym wszystkich znaczników skryptu), który jest po prostu niepotrzebny. Nic poza twoim ciałem nie zmieni się ogólnie w czasie wykonywania. Zobacz przykładowy przykład: https://github.com/yahoo/flux-examples/tree/master/fluxible-router Zasadniczo: utwórz element div w swoim ciele, przekształć rzeczywistą aplikację React na ciąg znaków i wydrukuj go wewnątrz aplikacji div. Następnie wyrenderuj zewnętrzny HTML i umieść w nim renderowaną aplikację div. Następnie ponownie nawodnij swoją aplikację w div aplikacji. W ten sposób zbudowałem całkiem dużą aplikację Fluxible, w tym [hash], działa świetnie! – Ambroos

Buforowanie z pakietem Webpack, [hash] wartość wewnątrz kodu źródłowego indeksu, przy użyciu React.js

Odpowiedz

Powiązane problemy