MFE应用层-开发框架

SPA单项目的开发框架一般来说要么是前端组自己搭建的经过沉淀的自研架构，要么就是使用现成的开源框架，接下来看看对于这两种情况的分析。

自研积累

基于现在大部分SPA业务层项目都是使用webpack，我们看一下本地开发框架需要解决的问题和webpack已经为我们解决的问题

• 本地开发调试

• API本地开发代理

以上可由自带的devServer解决

• js模块编译打包

• css编译

• 图片处理

• 页面入口处理

以上可由webpack的各种loader和plugin处理

• Polyfill

需要手动配置babel配置文件并结合babel-loader来转换

• typescript支持

  需要手动配置tsconfig和结合babel配置

• 认证问题

  这个需要结合各公司环境来分别处理

  • 如果在有集成单点登录的环境，可以通过二/三级域名cookie共享来解决，比如在login后返回如下，而在本地设置host为local.dev.yourcompany.com

  Set-Cookie: xxx; Domain=dev.yourcompany.com;
  

  • 如果是一些特殊的内网集成环境(如ADFS)，或无法采用多级域名共享的环境，则可以通过在webpack前架设本地node服务通过http请求做预登陆和认证先拿到token，再传递给webpack启动的方式
  • 当然，最后还有一个笨方法就是先登录目标环境，然后手动把token拷过来放到本地开发环境中，再在devServer中把changeOrigin改掉

• 集成前端日志系统

• 集成前端埋点系统

这种各企业环境强相关的问题需要自己动手来引入和搭建

• Mock数据

  采用第三方库如mockjs来模拟请求返回

• 页面路由

  代码层，这个就只有手动通过各种router来定义了

• 状态共享

  代码层，这个也只有手动来做，使用redux/mobx/vuex等

• 国际化问题

  使用例如react-intl等的第三方包手动搭建

• 当然还有其他问题

总结

自己搭的架子呢优点就是非常灵活，完全自主控制，包括技术栈选择和后续的独立升级或新技术的引入。缺点就是各项目大量的复制粘贴框架代码(在没有抽取企业自己的cli脚手架或抽取template的情况下)，后续控制乏力；还有就是各技术、工具的版本升级很难做到所有项目可控。

后续在MFE支持层的cli脚手架一节会详细讲怎么处理这个问题，怎么做积累。

开源脚手架

使用如create-react-app/vue-cli的脚手架来创建SPA业务层项目架构

优点：有各种预制的template可以选，如redux、typescript等，webpack的编译环境已经搭建好，可以直接上手开发写代码并运行调试。对于快速开始的小项目或者小公司可能会采用这种方式，但对于有统一规划的toB级平台这种方式使用的还是较少的。

缺点：当然有些问题还是需要自己解决的，如认证、日志等与企业环境强相关的功能需要自己手动来，一些代码规范，mock等也需要自己搞。还有最重要的一点是它隐藏了底层配置细节，如果使用内置模板并想做一些修改需要对这个框架有比较深入的了解。另外一个，如果想要积累企业级脚手架，基于开源脚手架做二次封装并不是一个好主意。

那么有没有好办法能使用自己积累的架构模板呢？答：自定义template

自定义Template

以上开源cli都支持从自定义template来创建项目，如：

//react-cli
$create-react-app my-project --template mygit/myreact-template
//vue-cli
$vue init mygit/myvue-template my-project

那么必然前提就是先积累一套自己的开发框架，当然，这套框架必然是不断演进的。

从命令可以看出来，自己的模板需要上传到git，并且需要按照一定规范，具体规范这里不展开可以看相关cli的要求。

使用template之后，自己积累的框架就可以通过管理和迭代template项目来进行更新了。解决了内置模板的大量问题，这个才是正确的开源cli打开方式。

开源框架

如果想躺平，自己积累都不想，那么有没有别人积累的好的好用框架？有，就是使用开源的成熟SPA业务层架构了，如：UmiJS

对各种功能进行了二次封装之后的面向业务向的架构，通常来说，这种框架一般采取约定+插件体系来构建生态。普通业务开发上手即用，有部分定制需求的可以通过插件体系来进行扩展。看看UmiJS提供的功能：

• 开箱即用
• 完备路由
• 大量自研
• 可扩展(通过插件)

至于其他的如企业级、面向未来这些功能跟实际使用者并无太大关系。至于大量自研和开源方案对比就看个人了，各有优缺。

开箱即用

官网解释：Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。

一句话其实就是，只需要配一下就可以开搞了，甚至可以只照着官网配一配，不用了解具体底层各种技术就开始开发业务。把需要手动配置的webpack或相关的功能进行了集成配置化，使用上更加方便。

可扩展

看一看现有插件就知道了基本就是对前端的流行插件进行了二次封装，当然你也可以自己基于开源库封装一个。

完备路由

把动态路由、嵌套路由、权限路由可配置化

总结

使用开源架子呢优点就是上手非常快，基本模块都有了，隐藏了非业务相关的底层细节，并且依赖功能的独立升级不用自己考虑，如果在部门或公司级铺开的话项目架构会非常一致。

缺点就是无法对依赖做一些定制的更改，或者针对性的做依赖升级等，项目架构依赖开源质量。同时，跟企业环境相关的工作同样无法避免的需要自己上手来搞。

总的来说，自研积累的目标其实就是做到一个成熟的开源框架，无非多了企业强相关功能和是否开源的问题而已。