多入口前台项目开发编译发布集成方案

一个大型的前台项目,例如内部ERP项目,其内部的各个业务直接虽然在逻辑上是强相关联的,但在系统开发中,其耦合度实际上并不足以需要做成单一入口,将其做成一个子业务一个入口的模式,有如下几个优点:

  • 业务模块化开发,可以一个或若干个开发人员负责特定的业务模块,各业务模块虽在一个工程,但在开发上拆分,利于Git协作,只需要常规的经常git rebase主分支代码即可,不会有太多的冲突问题
  • 随着业务复杂化,单个入口的方式无法很好调节维护所有业务模块的开发,不论开发或者发布都是整个工程进行部署,效率大打折扣。而多入口一个,可以按需编译开发和发布,以模块的方式持续集成和交付。

在使用Webpack作为项目的打包解决方案后,Webpack的热加载开发,DllPlugin,各种loaders提供了非常大的灵活性,给项目工程化开发很好的帮助。考虑到这一类工程结构的共性,以及约定优于配置的原则,我将这一套Webpack配置以及使用流程做成了单独的CLI工具-MyWebpack.

MyWebpack

MyWebpack工具主要提供如下功能:

  • 项目结构初始化 - mpk init: 自动生成一个约定的项目结构,使用React+TypeScript+Less/Sass技术栈,包含了TSLint代码检查,Prettier代码风格统一工具链,通过工具帮助纠错,美化,提升代码质量。

  • 入口代码从配置生成工具 - mpk gen: 由于入口文件代码有一定的格式要求且大多数类似,因此提供从yaml配置文件生成入口文件的工具,减少重复编码工作

  • 工程开发环境 - mpk start: Webpack的热加载极大的提高了开发效率,这里还添加了额外的功能,根据访问的入口页面自动编译对应入口代码文件,不需要编译整个项目,节省一些启动、编码所占用的时间

  • 代码编译与分析 - mpk analyze: 利用Bundle-Analyzer插件分析你的代码有什么package可以优化大小的地方

  • 代码发布 - mpk publish: 利用Webpack按需打包入口,打包成功自动commit至生产或者线上测试仓库,实现持续集成和交付的前置部分。

此外对于生产环境,希望最大化利用缓存,因此对所有生产发布的静态脚本以及样式资源文件名称均加基于内容的哈希值字段,对于此我的一篇博文里面已经提及,见Webpack Hash控制。除此之外,对于常见的第三方公共包如ReactReact-Dom,通过Webpack Dll插件将其打包成一个或多个vender bundles,这些包的内容大多数时间不会变动,因此要提供缓存的命中效率,将其与普通业务代码文件隔离,避免文件名Hash字段变动影响。

Webpack的动态Entry编译

项目开发编码占用非常大的时间,而在整个工程比较重的情况下,不能因为开发某一个入口模块而不断编译整个项目,毕竟不是做SPA。研究了一下Webpack的插件机制并实现了这个动态编译的过程。

主要如下几点:

  • 使用了Express取代简易的webpack-dev-server作为热编译服务,利用Express中间件判断请求所在的入口

  • 利用dev-middleware触发新的构建,Webpackcompiler实例生成新的compilation构建对象,在这里添加入口

  • 新入口的静态资源注入入口的html文件

以上,详细见MyWebpack-Github