【第557期】搭建前端私有npm杂记

前言

有必定规模的前端团队，本文值得一看。当初早读君看到这个的时候就想起一两年前给团队折腾的组件页面，当时仍是用bower来管理下载组件的，不过期过境迁，如今又有新的方式出来了，私有npm能够尝试起来。本文由@吕大豹受权分享其在搭建私有npm的过程。

正文从这开始～

随着前端队伍愈来愈壮大，项目间共享代码就变得尤其重要。经常使用的框架/类库不必在每一个项目都放一份，团队内部产出的公共模块也须要有合理的共享机制。如今，用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格式包装，这样不管用加载器仍是直接写<script>标签都是可用的。具体格式以下：

• 用模块的名称命名根目录

• 模块的不一样版本，新建不一样的目录，如jquery/1.8.3/src/jquery.js，jquery/2.1.0/src/jquery.js

• src目录，用于放置未压缩的源码

• dist目录，用于放置压缩后的代码

• 使用package.json文件的规格来描述本模块

这样就够了，系统提供发布功能，上传的文件会自动发布到咱们的npm，而且同步到cdn。至于模块的使用方法等其余信息，则须要模块维护者手动录入到系统中。这样，私有npm与这个资源管理系统就没有任何耦合，未来也好作扩展。流程以下：

关于cdn的同步，咱们只同步dist目录下的文件，由于线上只须要压缩版。至于模块的打包，不在本系统的职责范围内，由项目内的构建程序去完成。

 

如何使用

对于使用者，也就是前端同事们，须要作这么几件事：

• 项目中配置好package.json，npm install安装好所需的模块

• 从资源管理系统中获取到各模块的cdn地址

• 配置项目中的各模块地址，开发环境请求本地node_modules下的文件，线上环境请求cdn。

• 使用gulp进行相关的构建，发布到测试环境/线上环境

在npm install前，须要把仓库地址指向咱们搭的私有npm，而再也不是npm官方的地址。使用npm set resigtry命令。若是你以为麻烦，或者须要常常改动地址，github上有一个很方便的registry管理工具，nrm(https://github.com/Pana/nrm)，推荐使用。

第3步须要作一个说明，由于咱们如今项目不少，各项目的目录结构也不一致，有的先后端还未分离，因此没法作到用同一套构建程序搞定全部的项目。配置的方法视项目的状况而定，能够依靠后端来动态给require.config赋值，也能够用gulp来进行编译，总之能达到在不一样环境请求不一样路径就行。

 

技术细节

sinopia的话照着文档去安装就行。由于咱们是安装在服务器上，因此有两点配置须要注意：

• node_modules/sinopia/conf下的default.yaml中，listen: - 0.0.0.0:4873，使得其余机器能够访问到该端口

• 在sinopia的存储目录下，有一个config.yaml，把proxy: npmjs注掉。咱们公司内部可能只维护几个特定版本，因此不必和官方仓库同步。

sinopia有一个机制，当你从私有npm安装一个模块时，若是不存在，会从npm官方仓库拉取，也就是这个proxy配置的地址。咱们注掉后，也就没法去官方仓库去拉了，而这正是我须要的。一方面经过一个代理去访问npm有不稳定的风险，另外一方面，我须要使用者时刻清楚，本身安装的模块是哪一个仓库的。

至于资源管理系统的开发，后端使用nodejs、express，mongodb数据库，前端使用mvvm框架，还用了一个叫semantic的UI框架。基本就是对资源的增删改查操做，基本也没什么难度 。资源包含的字段以下：

其中，类别暂时分为三类：

• 框架/类库。已经成熟的框架/类库，基本不会修改其代码，如jquery、requirejs

• 第三方组件。UI组件及功能组件，来自于第三方，不像框架那样稳定且有长期维护，例如：datepicker、弹框插件

• 自研模块。公司内部本身写的模块，通用的业务模块、功能模块

关于发布npm。在系统中上传源码的zip文件，先进行解压，而后使用了nodejs的child_process模块用来执行npm install命令，代码片断以下：

至于cdn的同步，请到了咱们运维同窗的帮忙，我只要把文件上传至相关目录便可，后面的操做由他来搞~。

至此，咱们的前端资源仓库就搭建起来了，服务器上使用pm2来管理，把sinopia和资源管理系统的server.js起来就能够了。

总结

搭建这个项目其实难度并不大，但因为是抽空闲时间来搞，前先后后花了两个月时间。主要是花在系统的设计上。目前仍是beta版，陆续会更新内容，先运行起来让同事们尝尝，估计会有大量的建议和问题，后面再作升级吧。

后语

• 你所在的团队如今是用什么管理来管理前端组件的呢？

• 你们下载第三方组件的时候，淘宝npm不可错过。http://npm.taobao.org/