React + Nunjucks 静态页面前端渲染

Webpack 根据 HTML 模板 直接构建成静态 HTML 页面,然后通过 Nunjucks 执行页面渲染.

  • ${root}/app/controller/render.ts
import { Controller } from 'egg';
export default class ReactController extends Controller {
  public async reactNunjucksRender() {
    const { ctx } = this;
    await ctx.render('react-nunjucks-render.tpl', { 
      title: 'Nunjucks Render',
      data: JSON.stringify({ text: '基于 Egg + React + Nunjucks + TypeScript + Mobx + Webpack Client Side Render' }) 
    });
  }
}
  • config/res.config.js
// https://easy-team.gitee.io/egg-react/config
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const resolve = (filepath) => path.resolve(__dirname, '..', filepath);
module.exports = {
  entry: {
    'react-nunjucks-render': 'app/web/page/react-nunjucks-render/index.tsx',
  },
  plugins: [
    new HtmlWebpackPlugin({
      chunks: ['runtime', 'common', 'react-nunjucks-render'],
      filename: '../app/view/react-nunjucks-render.tpl',
      template: './app/web/view/index.tpl'
    })
  ]
};

Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
框架介绍 框架介绍
res -- Node React Application Web FrameworkGitHub:https://github.com/easy-team/res框架特性Node 端基于 Egg 开发,遵循 Egg 开发规范和 Egg 生态,支持 Egg 所有特性,比如插件机制,多进程机制...
2019-12-23 sky
Next 
项目开发 项目开发
默认集成插件res-cliegg-view-react-ssregg-view-nunjucksegg-webpackegg-webpack-react说明:Node 开发遵循 Eggjs 所有已有项目规范, 参考:https://github.com/easy-team/res-aweso...
2019-12-23 sky