第九节课问题收集

[loslakers]

No description provided.

[Beace]

想问下老师对于 Node 作为 API 和静态页面中间层的处理。场景是既要满足SEO，又可以体现服务端渲染的首屏性能。类似的用户登录态 COOKIE/Token 该怎么维护，怎么处理既存在模板渲染又存在 JS 操作 DOM的情况。

比方说用ejs来初始化渲染一个列表，但是列表可能会动态变化，这时候又需要 JS 利用 AJAX 来获取数据后进行 DOM 操作这个列表。感觉很多重复性的工作可能会做两遍。如果项目的规模没有必要做类似 React Vue 的同构的话，怎么去平衡的处理「模板」和 「AJAX」.d

这里有个代码示例，一个 Controller

// node
async list() {
  const res = await this.ctx.curl(
    '/sth/list',
    {
      dataType: 'json',
    },
  );
  await this.ctx.render('list.ejs', {
    dataList: res.data || [],
  });
}

一个 ejs

<% dataList.list.forEach(function(data) {%>
<p>xxxx</p>
<%})%>

还有 AJAX

const res = await fetch('/sth/list')
const listId = document.getElementById('list-id');
res.list.forEach(() => {
// replace  or append html string...
})

[miniflycn]

@Beace ejs也有浏览器版引擎啊，然后利用webpack引入模版不就好了～

[Beace]

@miniflycn 嗯嗯，这个可以 👍。但是说到 webpack，毕竟是个多页面应用，我这里用 html-webpack-plugin 去注入生成的 CSS 和 JS 的时候，它识别不了 ejs include 之类的语法。对于多页面应用貌似必须把所有的 page 都定义到 entry 需要 js 的时候都 new 一下 html-webpack-plugin ,于是我就有一下的代码

const htmlPlugins = files.map(
  file =>
    new HtmlWebpackPlugin({
      inject: 'body',
      template: `!!raw-loader!${path.join(
        __dirname,
        `./client/pages/${file.filename}.ejs`,
      )}`,
      filename: path.join(__dirname, `./app/view/${file.filename}.ejs`),
      chunks: file.chunks,
    }),
);
module.exports = {
  entry: {
     page1: xxxx.js,
     page2: xxx.js,
     ...xxxx,
  }
 ....
 plugins: [
    ...,
    ...htmlPlugins,
 ]
}

这样的做法是最好的方式吗？

[loslakers]

@Beace 参考：

• nesting templates using ejs jantimon/html-webpack-plugin#443 (comment)
• https://stackoverflow.com/questions/39063450/webpack-html-ejs-include-other-templates

1、可以换一个支持 include 的 loader 试试；
2、entry 可以用 fs.readdirSync 来自动生成（基于命名约定）。

[kuuroro]

问题1：老师在公司中会用类似Egg这样的框架，还是在koa这种基础上搭建。另外会用这种egg这种约定式的项目结构吗？，还是自己灵活配置的？

问题2：一次请求，nginx一层logs，pm2一层log，log4自己打一层log,我不知道这样描述是否准确，多层log在实际项目中怎么管理？遇到问题怎么看log。

问题3：在公司里面，怎么发布 部署？能否说下流程。（版本 灰度发布）。如果有空也说下前端项目的发布部署可以吗？感觉我们公司的部署方式太low

[loslakers]

@javenchen 可以答疑的时候聊聊