前端自动化-详细需求

    软件工程毕业的对需求很敏感，知晓做好一件事的需求工作十分重要，因此在这详细列出本次工程化的需求。

背景

目前公司的web前端页面是基于php框架之上，每次页面代码提交之后，由php同事进行数据处理及发布上线，十分不方便；由于前后端代码放在一起，导致代码管理混乱，协同开发效率低，代码量过大；无测试、编译、打包、压缩、发布、版本迭代、调试等功能；

目的

1，前后端分离，代码分开管理，分开提交，有效提升前后端协同开发效率；
2，前端使用目前流行的react，vue等MVVM框架，通过接口同域或跨域获取后端提供的数据，数据统一处理后传给组件，实现数据与视图分离；组件化开发，在代码复用、单元测试、场景切换等方面提高开发效率；
3，实现自动编译、打包、压缩、发布、版本迭代、线上调试、本地单元测试、模块测试、项目测试、代码校验等功能；
4，配置路由，既能实现单页spa项目路由功能，又能实现多页项目的多个页面的访问，并且能够提供同域接口。

需求点细分

1，前后分离，代码分开
2，接口异步获取后端数据
3，组件化开发，统一框架，配置环境
4，配置lint，进行代码校验，不合格的代码无法通过编译
5，配置单元测试（组件测试）环境，编写demo，尽量清晰容易
6，配置路由，实现以下功能：

1，单页应用统一映射至本项目根目录'/'，默认指向index.html页面
2，多页面应用可访问真实路径文件
3，默认可访问所有文件，通过是否有后缀判断，设置开关，可禁止访问指定项目的文件
4，同域接口，'/api'开始统一为接口路径，访问本地的接口函数
5，其他功能，如访问权限等
6，白名单， 无视规则限制
7，黑名单，无法访问 ...

7，编译，css（sass，less，postcss）js（jsx，es6，es7，harmony）html，json，img，react，vue，txt等
8，打包，组件化开发模式下，将页面需要的组件引入，pack之后上线
9，压缩，包括js，css，img的压缩
10，发布，git代码管理，发布到git仓库，本地或者服务器进行构建
11，添加版本号，实时更新线上代码
12，给线上压缩文件生成对应source_map文件，便于线上调试
13，增量模式，只对更改的项目进行流程化操作
14，开关调试模式，内置远程调试（手机端等）机制等形式，便于线上调试
15，接口域名根据环境匹配，设置global全局环境变量，线上环境使用线上域名，测试环境使用测试域名---（
根据当前url域名来判断是在线上环境还是测试环境
）
16，生成雪碧图，减少图片请求
17，常用库提取保存至根目录library文件夹里，避免多项目重复库文件
18，统一前端开发规范，编写说明文档