背景

前端渲染模式asset 渲染模式 章节讲到了基于 React 的前端渲染模式,但都依赖 egg-view-react-ssr 插件,那如何基于已有 egg 模板引擎 (egg-view-nunjucksegg-view-ejs) + Webpack 完全自定义前端方案呢?

关键问题

  • 本地开发 Webpack 与 Egg 集成,可以直接使用 egg-webpack, 该插件可以独立使用, 当然你可以实现。
  • 通过 egg-view-nunjucksegg-view-ejs 插件进行数据绑定
  • 通过 html-webpack-plugin 插件生成 HTML 文件,并自动注入 JS/CSS 依赖
  • 本地开发时,需要通过 write-file-webpack-plugin 插件把 Webpack HTML 文件写到本地。Webpack 默认是在内存里面,无法直接读取。

如何实现

这里以 egg-view-nunjucks 为例,其它模板引擎类似。

npm install egg-view-nunjucks --save
npm install egg-webpack --save-dev

// ${root}/package.json
{
   "dependencies": {
     "egg-webpack": "^4.0.0",
     "egg-view-nunjucks": "^2.2.0",
   }
}
// ${root}/config/plugin.local.js
exports.nunjucks = {
  enable: true,
  package: 'egg-webpack',
};

// ${root}/config/plugin.js
exports.nunjucks = {
  enable: true,
  package: 'egg-view-nunjucks',
};
  • 配置 layout.tpl 模板
<!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' />
  <!-- html-webpack-plugin 自动注入 css -->
</head>
<body>
  <div id='app'></div>
  <script type="text/javascript">
    window.__INITIAL_STATE__ = {{  }};
  </script>
  <!-- html-webpack-plugin 自动注入 js -->
</body>
</html>
  • 配置默认渲染引擎
// ${root}/config/local.js
module.exports = app => {
  const exports = {};

  exports.webpack = {
    webpackConfigList: require('easywebpack-react').getWebpackConfig()
  };

  return exports;
}

// ${root}/config/default.js
module.exports = app => {
  const exports = {};

  exports.view = {
    defaultViewEngine: 'nunjucks',
    mapping: {
      '.tpl': 'nunjucks'
    },
  };
  return exports;
}
  • render默认调用,使用 nunjucks 模板引擎
const egg = require('egg');
module.exports = class AppController extends egg.Controller {
  async home(ctx) {
    await ctx.render('layout.tpl', { title: '自定义渲染' });
  }
}
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');
module.exports = {
  egg: true,
  target: 'web',
  entry: {
    app: 'app/web/page/app/app.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: '../app/view/layout.tpl',
      template: './app/web/view/layout.tpl'
    }),
    new WriteFilePlugin({
      test: /\.tpl$/
    })
  ]
};

依赖插件

骨架项目

https://github.com/easy-team/egg-react-webpack-boilerplate/tree/feature/green/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
Egg SSR Webpack 内存编译热更新实现 Egg SSR Webpack 内存编译热更新实现
1. 背景在用 Node.js + Webpack 构建的方式进行开发时, 我们希望能实现修改代码能实时刷新页面UI的效果. 这个特性 Webpack本身是支持的, 而且基于koa也有现成的 koa-webpack-hot-middleware 和 koa-webpack-dev-middle...
2019-11-10 sky
Next 
前端渲染模式 前端渲染模式
Egg + React 客户端浏览器渲染模式调用 egg-view-react-ssr 的 renderClient 方法实现客户端浏览器渲染renderClient 表示 Node 服务端端只渲染一个包含 HTML,header,body 的一个简单 HTML 页面骨架, 具体页面内容由 R...
2019-11-02 sky