基于 Egg + React + TypeScript + Webpack 服务端渲染工程骨架
- Egg 版本: ^2.x.x
- Node 版本: Node ^8.x.x+,
- Webpack 版本: ^4.x.x
- React 版本: ^16.0.0
- TypeScript: ^3.0.0
-
支持 Egg Node 端代码和前端代码 TypeScript 编写和构建
-
支持 Node 和 asyncData 方式获取数据进行渲染
-
支持多页面(MPA) 和 单页面(SPA) 服务端渲染(SSR)和前端渲染(CSR)
-
支持 AntD 按需加载和主题配置功能以及 MobX 应用
-
支持 Webpack 时时编译和热更新,
npm run dev
一键启动应用 -
支持开发环境, 测试环境,正式环境 Webpack 编译
npm install
npm 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.ts
Node 代码
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.ts
Egg 路由配置
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',
}
}