Recommend Reading

工程介绍

Egg React 工程解决方案特性支持Node 端基于 Egg 开发,遵循 Egg 开发规范和 Egg 生态,支持 Egg 所有特性,比如插件机制,多进程机制。使用 TypeScript 或 JavaScript 编写前端和Node端代码,支持 ts-node 无编译 和 Webpack 编...

Read more

快速开始

基于 Egg + React + Webpack 服务端渲染开发指南1. 项目初始化1.1 通过 easywebpack-cli 脚手架初始化安装脚手架 npm install easywebpack-cli -g 命令行,然后就可以使用 easy 命令命令行运行 easy init选择 e...

Read more
工程介绍 工程介绍
Egg React 工程解决方案特性支持Node 端基于 Egg 开发,遵循 Egg 开发规范和 Egg 生态,支持 Egg 所有特性,比如插件机制,多进程机制。使用 TypeScript 或 JavaScript 编写前端和Node端代码,支持 ts-node 无编译 和 Webpack 编...
2019-12-08 sky
快速开始 快速开始
基于 Egg + React + Webpack 服务端渲染开发指南1. 项目初始化1.1 通过 easywebpack-cli 脚手架初始化安装脚手架 npm install easywebpack-cli -g 命令行,然后就可以使用 easy 命令命令行运行 easy init选择 e...
2019-12-08 sky
从零开始 从零开始
从零开始搭建 Egg + React + Webpack 服务端渲染项目1. 初始化环境安装 Node LST (8.x.x) 环境: https://nodejs.org/zh-cn2. 初始化 egg 项目https://github.com/eggjs/egg-init/blob/mas...
2019-12-08 sky
服务端渲染模式 服务端渲染模式
目前 egg-view-react-ssr 支持 服务端渲染模式 和 前端渲染模式 两种渲染模式Egg + React 服务端 SSR 渲染模式这里服务端渲染指的是编写的 React 组件在 Node 服务端直接编译成完整的HTML, 然后直接输出给浏览器。MVVM 服务端渲染相比前端渲染,支...
2019-12-08 sky
前端渲染模式 前端渲染模式
Egg + React 客户端浏览器渲染模式调用 egg-view-react-ssr 的 renderClient 方法实现客户端浏览器渲染renderClient 表示 Node 服务端端只渲染一个包含 HTML,header,body 的一个简单 HTML 页面骨架, 具体页面内容由 R...
2019-12-08 sky
asset 前端渲染 asset 前端渲染
背景在 前端渲染模式 章节讲到了基于 React 的一体化的前端渲染模式,好处是不需要借助第三方模板引擎且无效关注静态资源注入问题,但有两个小的功能限制:layout 模板数据绑定能力较弱资源注入不能自己定义,比如 async, crossorigin 等配置针对上面问题 egg-view-r...
2019-12-08 sky
HTML前端渲染 HTML前端渲染
背景在 前端渲染模式 和 asset 渲染模式 章节讲到了基于 React 的前端渲染模式,但都依赖 egg-view-react-ssr 插件,那如何基于已有 egg 模板引擎 (egg-view-nunjucks 或 egg-view-ejs) + Webpack 完全自定义前端方案呢?...
2019-12-08 sky
配置说明 配置说明
Webpack 标准配置// ${root}/webpack.config.js module.exports = { entry: { app: 'app/web/page/app/index.js', // js 文件需要自己实现 react.render 逻辑 he...
2019-12-08 sky
构建流程 构建流程
基于Egg+React+Webpack构建流程1. 本地Egg项目启动首先执行node index.js 或者 npm run dev 启动 Egg应用在 Egg Agent 里面启动koa服务, 同时在koa服务里面启动Webpack编译服务挂载Webpack内存文件读取方法覆盖本地文件读取...
2019-12-08 sky
部署流程 部署流程
开发部署新项目开发在 egg-react-webpack-boilerplate 骨架项目中, 提供了一些demo, 如果要进行新项目开发,可以删除部分文件:app/web/page 是页面目录。下面的每个目录都是一个单独的页面,其中 spa 目录是一个单页面服务端渲染例子,其他是简单的 Re...
2019-12-08 sky
SEO 实现 SEO 实现
Egg + React SSR SEO 实现MVVM 服务端渲染相比前端渲染,支持 SEO,更快的首屏渲染,相比传统的模板引擎,更好的组件化,前后端模板共用。在 Egg + React 的方案里面, HTML head 里面 meta 信息也作为 React 服务端渲染的一部分, 和普通的数据...
2019-12-08 sky
AntD 配置 AntD 配置
项目示例: https://github.com/easy-team/egg-react-webpack-boilerplate/tree/antd-theme按需加载依赖配置// ${root}/package.json { "devDependencies": { &...
2019-12-08 sky
Babel 配置 Babel 配置
在进行 Egg + React 进行 SSR 模式开发时,运行 npm run dev 后你会看到如下界面, 启动了两个 Webpack 构建实例:Node 模式 和 Web 模式。SSR 运行需要 Webapck 单独构建 target: node 和 target: web 主要的...
2019-12-08 sky
TypeScript TypeScript
骨架项目https://github.com/easy-team/egg-react-typescript-boilerplate多种渲染https://github.com/easy-team/egg-react-typescript-boilerplate/tree/awesome-ren...
2019-12-08 sky
组件异步加载 组件异步加载
issue: react-loadable 怎么加入这个骨架中 #23安装依赖npm install react-loadable --save实现异步组件// async-image.jsx import React, { Component } from 'react'; import L...
2019-12-08 sky
升级更新 升级更新
发布历史https://github.com/easy-team/egg-react-webpack-boilerplate/blob/master/CHANGELOG.md版本特性easywebpack体系通过 @easy-team 模式内置 Babel 7 方案 骨架分支: master,...
2019-12-08 sky
常见问题 常见问题
常见问题汇总AntD 按需加载与主题定制 以及 issue如果实现 Egg + React + Webpack  热更新?服务端渲染如何使用 react-loadabel 实现异步加载React 文件热更新入口配置模板import React from 'react'; import Reac...
2019-12-08 sky
社区作品 社区作品
easy-teamhttps://github.com/easy-team/egg-react-webpack-boilerplatehttps://github.com/easy-team/egg-react-typescript-boilerplateReact + Mobx 例子http...
2019-12-08 sky