React + Nunjucks Asset前端渲染

https://easy-team.gitee.io/egg-react/asset

${root}/app/controller/render.ts

import { Controller, Context } from '@easy-team/res';
export default class AdminController extends Controller {
  public async home(ctx: Context) {
     await ctx.renderAsset('asset.js', { 
      title: 'React Asset Client Render',
      text: 'Egg + React + TypeScript + Webpack Client Side Render' 
    }, { layout: path.join(ctx.app.baseDir, 'app/web/view/layout.tpl'),} );
  }
}

${root}/app/web/view/layout.tpl

renderAsset 自动注入资源依赖对象,然后自己根据 asset 对象进行 CSS和 JS 注入到 HTML 页面。

<!DOCTYPE html>
<html lang='en'>
<head>
  <title>{{title}}</title>
  <meta name='keywords'>
  <meta name='description'>
  <meta http-equiv='content-type' content='text/html;charset=utf-8'>
  <meta name='viewport' content='initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui'>
  <link rel='shortcut icon' href='/favicon.ico' type='image/x-icon' />
  {% for item in asset.css %}
    <link rel="stylesheet" href='{{item}}' />
  {% endfor %}
</head>
<body>
  <div id='app'></div>
  <script type="text/javascript">
    window.__INITIAL_STATE__ = {{ asset.state | safe }};
  </script>
  {% for item in asset.js %}
    <script type="text/javascript" src="{{item}}"></script>
  {% endfor %}
</body>
</html>

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
前端渲染模式 前端渲染模式
浏览器渲染模式指的是Node 端只会根据包含html, head, body节点信息的 layout 文件输出骨架内容, 页面的实际内容交给浏览器去渲染。调用 egg-view-vue-ssr 的 renderClient 方法实现客户端浏览器渲染在使用上面, 客户端浏览器渲染模式只需要把 render 改成 renderClient。 正常情况下, 能进行 render 运行的, renderClient 方式也能正常运行。Webpack 配置优化,提高构建速度在 ${root}/webpack...
2019-12-23 sky
Next 
构建发布 构建发布
构建文件TypeScript Node 构建npm run tscTypeScript 前端工程构建npm run build项目打包部署先运行 npm run tsc 和 npm run build 构建 TypeScript Node 代码和 TypeScript 前端代码项目代码和构建代...
2019-12-23 sky