TypeScript + React + Ant Design项目开发总结（一）

写在前面

本次项目是公司进行的CRM改造项目，因此，项目主要用于内部员工，如销售，运营，售后等进行客户的相关数据的维护，项目前端技术选用React，UI框架选用Ant Design，由于是内部系统，因此对UI界面的要求并不算高，基本上基于Ant Design本身的控件进行开发。

项目总体预览

先对项目结构进行一个大致的预览：

项目的框架是由前辈搭建的，我来主要剖析一下这个项目。项目主要分为两个大块：

1. app模块（项目内部主要功能模块），下面再分common模块（提取内部公用模块，例如公共组件，公共枚举，公共服务类），module模块（细分各个功能模块）
2. build模块（项目启动模块），由于使用了node进行首屏渲染，所以单独出文件夹；
3. 其他文件，主要是babel文件用于转es6，tsconfig用于配置typescript
   下面开始先总结下build模块。

build模块

由于项目使用nodejs的express框架进行了首屏渲染，所以独立出来的build文件夹，就很有剖析的必要了。

server文件夹

这里的data文件夹下是放置了一些静态数据，比如省市区的信息。routes.js 文件配置了express的路由，server.dev.js 和 server.js 是启动服务的主要文件。

server.js

let express = require('express');
let compression = require('compression');
let path = require('path');
let app = express();
let distFolder = path.join(__dirname, './dist');
let serveStatic = require('serve-static');
let packageConfig = require('./package.json');
let routes = require('./routes');
const config = packageConfig.config;
const port = config.port;

routes(app, config);

app.use(compression());

app.use(serveStatic(distFolder, {
   
    maxAge: '7d',
    index: ['index.html'],
    etag: false,
    setHeaders: function (res, path, stat) {
   
        if (path.indexOf('index.html') >= 0) {
   
            res.setHeader(