写在前面
本次项目是公司进行的CRM改造项目,因此,项目主要用于内部员工,如销售,运营,售后等进行客户的相关数据的维护,项目前端技术选用React,UI框架选用Ant Design,由于是内部系统,因此对UI界面的要求并不算高,基本上基于Ant Design本身的控件进行开发。
项目总体预览
先对项目结构进行一个大致的预览:
项目的框架是由前辈搭建的,我来主要剖析一下这个项目。项目主要分为两个大块:
- app模块(项目内部主要功能模块),下面再分common模块(提取内部公用模块,例如公共组件,公共枚举,公共服务类),module模块(细分各个功能模块)
- build模块(项目启动模块),由于使用了node进行首屏渲染,所以单独出文件夹;
- 其他文件,主要是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(