随着前端队伍越来越壮大,项目间共享代码就变得尤为重要。常用的框架/类库没必要在每个项目都放一份,团队内部产出的公共模块也需要有合理的共享机制。现在,用npm管理前端代码已经是业界趋势。楼主尝试用私有npm+资源管理系统的方式搭建起一套前端资源仓库,用以在公司内部托管公共代码,并为开发环境提供代码源。本文记录一下搭建过程,或许可以给大家做个参考。
整体架构
搭建私有npm的话其实是非常简单的,github上有一个叫做sinopia(
https://github.com/rlidwka/sinopia)的项目,使用相当简单,无需配置数据库。用阿里的cnpm也是可以搭建私有npm的,不过配置稍微麻烦些。鉴于只是beta阶段,所以我就先采用简单的sinopia了。npm有两个作用:1.托管公共代码;2.为开发环境提供代码源。也就是说在开发环境,只需npm install,相应的代码就被下载到项目中。当然我们应该配置ignore,使得node_modules文件夹不被提交到代码库。线上的资源都是走cdn的。
光是私有npm还是不够的,考虑到公司不断有新的前端入职,有些还是新手,所以有必要为每个模块提供详细的说明。包括不限于基本信息、使用方法、在线demo、cdn地址等等。使用README.md文件虽然也能描述很多信息,但它只是一个静态文件,我们的系统还需要具备发布到npm、同步到cdn的功能。以后也可能进行功能扩充,比如为前端工程化提供支持。所以还需要一个资源管理系统,这个系统用于维护公共资源的各种信息。
所以,这么考虑下来,我们的前端资源仓库应该包含两部分:资源管理系统、私有npm。各自的功能如下:
资源仓库的维护
所谓维护就是把源代码录入到资源管理系统、发布到npm、同步到cdn这一过程。按照npm的规格来组织模块的目录结构,但也不完全一致,因为有些是不需要的。模块都用UMD格式包装,这样无论用加载器还是直接写