我正在查看底部的代码示例,这是一个 React ssr 示例:

configureProduction函数中,有这样一行:

const clientStats = require('./assets/stats.json'); 

所需的 stats.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')}...`)); 

请您参考如下方法:

这可能是由 webpack 插件 ( https://github.com/danethurber/webpack-manifest-plugin ) 在构建客户端包后生成的文件,该文件名经过哈希处理并且对服务器来说是必需的,因此它知道如何渲染基本模板,然后该模板将被渲染引导客户端。

当然,这是猜测,因为我们无权访问您的 json 文件、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" 
} 


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!