Кэширование с помощью Webpack, значение [хэш] внутри исходного кода индекса с использованием React.js

Я создаю изоморфное приложение. Он полностью построен с помощью реакции, а именно, база html также находится в реакции.

У меня есть корневой html как компонент приложения.

Это выглядит примерно так:

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

Когда я создаю проект с помощью веб-пакета, мне нужно заменить js/bundle.js, чтобы включить хэш.

Webpack доставляет stats.json после завершения. Но мне нужно, чтобы хэш был доступен во время сборки.

Я думал об использовании флагов функций, чтобы сделать что-то вроде:

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

Что в идеале вставило бы правильную ссылку на хеш во встроенный js.

Это немного сложно, так как это самоссылка. Есть ли лучший способ сделать это? Изменение встроенного кода после завершения работы веб-пакета кажется контрпродуктивным. Я также подумал о том, чтобы клиент просто запрашивал bundle.js, но чтобы мой сервер узла обслуживал хешированный файл.

Что было бы правильным решением для этого кэширования?


webpack reactjs node.js caching isomorphic-javascript
person Federico    schedule 18.05.2015    source источник

Ответы (3)


arrow_upward
7
arrow_downward

ExtendedAPIPlugin добавляет в ваш пакет переменную __webpack_hash__, которая может быть что вы ищете.

person Alexandre Kirszenberg    schedule 19.05.2015
comment
Это было именно то, что я искал. - person Federico; 19.05.2015

arrow_upward
4
arrow_downward

Вместо того, чтобы пытаться отобразить его в приложении, я нашел лучшее решение — передать ресурсы веб-пакета в приложение. Это может быть либо напрямую через реквизит, либо через ваш поток.

Таким образом, ваш код отображается с переменной. Значение вашей переменной не имеет значения для процесса сборки.

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

Что-то такое.

person Federico    schedule 18.05.2015

arrow_upward
0
arrow_downward

Вы никогда не должны отображать свой полный HTML на клиенте. Ваша голова и все, что находится за пределами вашего приложения в теле, должно быть просто отправлено с сервера. Таким образом, ваша проблема будет решена сразу, так как ваш клиентский Javascript не должен знать, в каком файле он находится, а на сервере вы можете просто ждать, пока статистика будет готова.

person Ambroos    schedule 19.05.2015
comment
Это изоморфное приложение. Это реагирующее приложение отображается на сервере с React.renderToString(). Это отображает строку (или только часть представления компонента). Он включает в себя голову и все, что находится за пределами приложения, и отправляется с сервера. На клиенте вы должны «повторно увлажнить» документ с помощью точно такого же приложения для реагирования. На клиенте вы делаете React.render(), который будет отображать представление + обработчики функций/событий. - person Federico; 19.05.2015
comment
Конечно, но вы не должны пытаться перезагрузить полный HTML-код на клиенте (включая все теги script), это просто не нужно. Ничто вне вашего тела обычно не меняется во время выполнения. Посмотрите здесь хороший пример: github.com/yahoo/flux -examples/tree/master/fluxible-router В основном: создайте div приложения внутри вашего тела, отобразите ваше фактическое приложение React в строку и распечатайте его внутри div приложения. Затем визуализируйте внешний HTML и поместите в него визуализированный div приложения. Затем переведите ваше приложение в div приложения. Таким образом я создал довольно большое приложение Fluxible, в том числе [хэш], отлично работает! - person Ambroos; 19.05.2015