14

有没有办法直接在 HTML 入口点中预生成（单路由）React 应用程序的 HTML 结构？

然后页面将能够在加载任何 JS 之前显示 HTML（基于 React 初始状态）。

我实际上使用的是webpack-html-loader，但欢迎使用任何其他加载器或插件；）

PS：static-site-generator-webpack-plugin有什么帮助吗？

PS：我没有使用 React Router

4

4 回答 4

10

如果你想使用static-site-generator-webpack-plugin，你首先需要使用 webpack 构建一个包，该包bundle.js导出一个带有以下参数的渲染函数。

  • locals具有各种页面元数据的对象，例如title进入组件参数（传统上被认为是模板变量）。
  • callback一个 nodejs 样式的(err, result)回调，您将使用呈现的 html 作为值来调用result

例如

// entry.js, compiled to bundle.js by webpack

module.exports = function render(locals, callback) {
  callback(null, 
      '<html>' + locals.greet + ' from ' + locals.path + '</html>');
};

正是在这个函数中，您将实例化您的组件（如果需要，可能通过 React Router）并使用ReactDOMServer.renderToString().

然后，您将在包含上述元数据值的对象中指定编译bundle.js为bundle您的实例化StaticSiteGeneratorPlugin以及具体路由。pathslocals

var paths, locals; // compute paths from metadata files or frontmatter

module.exports = {
  entry: {
    bundle: './entry.js' // build bundle.js from entry.js source
  },
  ...,
  plugins: [
    new StaticSiteGeneratorPlugin('bundle', paths, locals)
  ]
}

locals您在in 中指定的键webpack.config.js将出现在locals每次调用的参数中render(locals, callback)。它们将与插件提供的path,assets和键合并。webpackStats

如果您想在渲染后将 javascript 代码加载到您的页面中，您可以page.js在您的 webpack 配置中编译一个附加条目，该条目以ReactDOM.render()典型方式调用，然后将该包加载到您的函数中script发出的标记中（如上）。确保将组件安装到 DOM 中与渲染时相同的位置（您可能会在父元素上设置属性）。您还需要确保任何位置（即路由路径）因变量在两种环境中都对齐。render(locals, callback)bundle.jspage.jsentry.jsid

查看Gatsby的源代码，它也使用了这个插件。您还可以查看Phenomic的源代码以了解替代方法。

于 2017-02-18T11:56:54.013 回答
2

您应该尝试服务器端渲染，它会让 react 在后端渲染您应用的第一个视图并提供静态 HTML。该样板文件已经附带了服务器渲染设置，您可以在此处了解更多信息

于 2017-02-04T03:33:07.850 回答
0

在这里，您有一个工作示例https://github.com/angglada/preact-minimal/blob/master/config/webpack.config.js，如果您愿意，可以分叉它并看看它是如何一起工作的。

希望能帮助到你 ：）

于 2017-02-25T10:13:03.993 回答
0

Jekyll是很棒的静态站点生成器，可以使用自定义 ruby​​ 插件进行扩展。您需要启用WebPack才能进行Jekyll调用。请参阅将 Webpack 插入 Jekyll 支持的页面

于 2017-02-25T08:59:22.643 回答