升级更新

发布历史

https://github.com/easy-team/egg-react-webpack-boilerplate/blob/master/CHANGELOG.md

版本特性

egg-view-react-ssr

发布 egg-view-react-ssr@3.0.0 和 egg-webpack-react@3.0.0 插件，主要包括：

• Node 最低版本为 8 （ 2.x.x 最低版本为 6）
• React SSR 支持 asyncData Hook 模式，不再支持 Promise Callback 方式
• React SSR 支持 Statelss Component 渲染
• egg-view-react-ssr 配置 layout 配置由 layout.js 改成 layout.html
• 升级 egg-react 相关骨架, 相关案例见 egg-react-webpack-boilerplate

egg-view-react-ssr 标准化 render 和简化 asyncData 方式

egg-view-react-ssr 3.x.x 插件 Stateless Component SSR 支持

import React, { Component } from 'react';
export default (props) => {
  return <div>
    <div className="main">
      <div className="page-container page-component">
        <h1>{props.text}</h1>
      </div>
    </div>
  </div>;
};

egg-view-react-ssr 3.x.x 插件 asyncData 数据请求支持

在 egg-view-react-ssr 3.x.x 版本时，React SSR 组件直接定义 static asyncData function 方式实现异步逻辑调用(React Render 时，会检测是否存在 asyncData 方法)，egg-view-react-ssr 2.x.x 插件 Callback Promise 方式不再支持，请用 asyncData 模式改造支持。代码大概如下：

import React, { Component } from 'react';
class AsyncDataMode extends Component {
  static async asyncData(locals) {
    const res = await axios.get('/test/api/article');
    return res.data;
  }
  render() {
    const { title, article } = this.props;
    return <div>
      <h1 className="easy-article-detail-title">{title}</h1>
      <h2 className="easy-article-detail-title">{article.title}</h2>
      <div className="easy-article-info">
        <iframe src={article.url} frameBorder="0" width="100%" style={{minHeight: '800px'}}></iframe>
      </div>
    </div>;
  }
}
export default AsyncDataMode;

egg-view-react-ssr 2.x.x 插件 Callback Promise 数据请求逻辑

在 egg-view-react-ssr 2.x.x 版本时，React SSR 入口时是通过 callback 返回 Promise 方式实现异步逻辑调用，代码大概如下：

server(config) {
    return context => {
      const { Entry, createRouter, createStore } = config;
      const url = context.state.url;
      const router = createRouter();
      const matchRoute = matchRoutes(router, url);
      const promises = matchRoute.map(({ route }) => {
        const asyncData = route.component.asyncData;
        return asyncData instanceof Function ? asyncData(context, route) : Promise.resolve(null)
      });
      return Promise.all(promises).then(list => {
        const data = list.reduce((item, result) => {
          return Object.assign(result, item);
        }, {});
        Object.assign(context.state, data);
        const store = createStore(context.state);
        return () => {
          return <Provider store={store}>
            <StaticRouter location={url} context={{}}>
              <Entry url={url} />
            </StaticRouter>
          </Provider>
        }
      });
    };
  }

easywebpack 体系通过 @easy-team 模式内置 Babel 7 方案

骨架分支： master，版本 4.6.0

• @easy-team/easywebpack 提供内置 babel 7 升级方案，主要修改如下：
  • easywebpack-cli > @easy-team/easywebpack@^4.0.0
  • easywebpack-react > @easy-team/easywebpack-react@^4.0.0
  • .babelrc 配置升级为 babel 7 配置 babel.config.js

Egg + React + Nunjucks 自定义纯前端渲染方案支持

骨架分支： feature/green/html

• 提供 egg 模板引擎 (egg-view-nunjucks 或 egg-view-ejs) + Webpack 完全自定义前端方案 https://www.yuque.com/easy-team/egg-react/html