- Res（Egg）
版本 ： ^2.0.0 - Node
版本 : Node ^8.0.0, - Webpack
版本 : ^4.0.0 - React
版本 : ^16.0.0 - TypeScript: ^3.0.0
- https://easyjs.cn/egg-react
- https://easyjs.cn/egg-react/res
- https://www.yuque.com/easy-team/egg-react
-
支持 Egg Node端 代 码和前 端 代 码 TypeScript 编写和 构建 -
支持 Node和 asyncData方式 获取数 据 进行渲染 -
支持 多 页面(MPA)和 单页面 (SPA)服 务端渲染(SSR)和 前 端 渲染(CSR) -
支持 AntD 按需加 载和主 题配置 功 能 以及 MobX 应用 -
支持 Webpack 时时编译和 热更新 ,npm run dev一 键启动应用 -
支持 开发环境, 测试环境，正式 环境 Webpack 编译
npm installnpm run dev应用访问: http://127.0.0.1:7001
- TypeScript Egg 构建
npm run tsc- TypeScript
前 端 工程 构建
npm run build先 运行npm run tsc和 npm run build构建 TypeScript Egg代 码和 TypeScript前 端 代 码- 项目
代 码和构建代 码一起打包代码 - 应用
部署 后 ，通 过npm start启动应用
添加 ${root}/app/web/page/demo.tsx前 端 代 码
'use strict';
import React, { Component } from 'react';
class Demo extends Component<any, any> {
render() {
const { title, article } = this.props;
return <div>
<h1 className="easy-article-detail-title">{title}</h1>
<h3 className="easy-article-detail-title">{article.title}</h3>
<div>{article.content}</div>
</div>;
}
}
export default Demo;
添加 ${root}/app/controller/demo.tsNode代 码
import { Controller, Context } from 'egg';
export default class DemoController extends Controller {
public async index(ctx: Context) {
const title = 'Node 直接 获取渲染数 据 ';
const article = await ctx.service.article.query({ id: Number(id) });
await ctx.render('demo.js', { title, article });
}
}
添加 ${root}/app/router.tsEgg路 由 配置
import { Application } from 'egg';
export default (app: Application) => {
const { router, controller } = app;
router.get('/demo', controller.demo.index);
};
添加 ${root}/webpack.config.js新 增 页面 entry配置
module.exports = {
entry: {
demo: 'app/web/page/demo.tsx',
}
}