模块拆分要点

1. 静态资源 context path 调整。整合前端发布体系后，所有前端资源均在同一静态服务器目录下，所以单一系统的入口会变成 //xx.com/${systemName}/index.html，对于老系统需要手动替换静态资源路径，包括通过 css 引用的图片、img 标签引用的图片、ng-include 或 路由 引用的 html 等。开发期则需要在 express 中加入静态资源上下文，如 app.use("/${systemManagement}",express.static(path.join(__dirname, 'src')))。使用 es6 开发并借助 webpack 打包的系统则只需简单修改 output 配置即可。
2. api 接口 context path 调整。新系统不采用老的各模块独立域名架构，如果后端 api 并未使用服务化方式开发(接口无系统前缀)，则需前端在 ajax 中统一加入前缀(可以在拦截器中添加)，并在前端静态资源服务器配置好前缀接口转发规则。
3. 消除系统中在运行时通过判断 location 从而确认所处环境的方式。不同环境的不同代码版本在编译期确定。 webpack 借助 htmlWebpackPlugin，旧系统使用 gulp html replace 方式。
4. 项目中拆出客户端 portal。顶部菜单组件化、portal 组件化，方便其他独立系统(如系统管理、账户管理)调用。遵循 纯组件 —> portal lib 渐进式设计原则(先提供纯 portal 组件，再提供相应的完整 lib，喊数据服务等)。
5. 目录结构

• 增加 src、mock 文件夹。 src 为源码目录(原始系统代码)，mock 为接口 mock 目录(原始系统 routes 目录)。
• src 中目录结构跟老版本模块一致，老版本中引入的外部资源(css、imgs、lib 等)放入 src/assets 目录。

重构步骤

1. 按照上面的模块拆分要点，改造好代码
2. 在Jenkins中创建好相应的系统部署任务
3. 配置nginx做好静态资源转发

时间

2个人，拆分5个模块，从入手到灰度全部上线，花费 1 个月。