ssr с react и express и требует статистики.в JSON объяснение
Я смотрю на пример кода внизу, который является примером react ssr:
на configureProduction
функция, она имеет эту строку:
const clientStats = require('./assets/stats.json');
что это статистика.файл json, который требуется?
import express from 'express';
import { join } from 'path';
import { log } from 'winston';
/**
* Configures hot reloading and assets paths for local development environment.
* Use the `npm start` command to start the local development server.
*
* @param app Express app
*/
const configureDevelopment = app => {
const clientConfig = require('../webpack/client');
const serverConfig = require('../webpack/server');
const publicPath = clientConfig.output.publicPath;
const outputPath = clientConfig.output.path;
const multiCompiler = require('webpack')([clientConfig, serverConfig]);
const clientCompiler = multiCompiler.compilers[0];
app.use(require('webpack-dev-middleware')(multiCompiler, {publicPath}));
app.use(require('webpack-hot-middleware')(clientCompiler));
app.use(publicPath, express.static(outputPath));
app.use(require('webpack-hot-server-middleware')(multiCompiler, {
serverRendererOptions: { outputPath }
}));
app.set('views', join(__dirname, '../public/views'));
};
/**
* Configures assets paths for production environment.
* This environment is used in deployment and inside the docker container.
* Use the `npm run build` command to create a production build.
*
* @param app Express app
*/
const configureProduction = app => {
const clientStats = require('./assets/stats.json');
const serverRender = require('./assets/app.server.js').default;
const publicPath = '/';
const outputPath = join(__dirname, 'assets');
app.use(publicPath, express.static(outputPath));
app.use(serverRender({
clientStats,
outputPath
}));
app.set('views', join(__dirname, 'views'));
};
const app = express();
log('info', `Configuring server for environment: ${process.env.NODE_ENV}...`);
if (process.env.NODE_ENV === 'development') {
configureDevelopment(app);
} else {
configureProduction(app);
}
log('info', 'Configuring server engine...');
app.set('view engine', 'ejs');
app.set('port', process.env.PORT || 3000);
app.listen(app.get('port'), () => log('info', `Server listening on port ${app.get('port')}...`));
3 ответов
это, скорее всего, файл, сгенерированный плагином webpack (https://github.com/danethurber/webpack-manifest-plugin) после создания клиентского пакета это имя файла хэшируется и необходимо серверу, чтобы он знал, как отобразить базовый шаблон, который затем загрузит клиент.
конечно, это предположение, так как у нас нет доступа к вашему , webpack
настройки или package.json
..
этот репозиторий использует аналогичный подход: https://github.com/CheesecakeLabs/react-redux-boilerplate/ Он создает клиент, генерирует такой же файл, а затем создает пакет сервера, используя этот файл JSON в качестве информационной точки, чтобы понять, как называется пакет клиента.
файл JSON должен быть похож на это:
{
"apple-touch-icon.png": "114dec1694406188ff0cb2698607cbca.png",
"production.css": "production.fbee6dc76218b122f7ff.css",
"production.css.map": "production.fbee6dc76218b122f7ff.css.map",
"production.js": "production.fbee6dc76218b122f7ff.js",
"production.js.map": "production.fbee6dc76218b122f7ff.js.map",
"safari-pinned-tab.svg": "f157afc1cf258044878dab6647d2800b.svg"
}
на созданный webpack-stats-plugin
и может использоваться процессом узла для "определите правильный путь пакета на вашем сервере": https://github.com/FormidableLabs/webpack-stats-plugin
проект вы ищете на ниже
https://github.com/rherwig/template-react-16-ssr/blob/master/src/index.js
если вы посмотрите на