搭建前端私有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>标签都是可用的。具体格式如下:

  1. 用模块的名称命名根目录
  2. 模块的不同版本,新建不同的目录,如jquery/1.8.3/src/jquery.js,jquery/2.1.0/src/jquery.js
  3. src目录,用于放置未压缩的源码
  4. dist目录,用于放置压缩后的代码
  5. 使用package.json文件的规格来描述本模块

这样就够了,系统提供发布功能,上传的文件会自动发布到我们的npm,并且同步到cdn。至于模块的使用方法等其他信息,则需要模块维护者手动录入到系统中。这样,私有npm与这个资源管理系统就没有任何耦合,将来也好做扩展。流程如下:

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

如何使用

对于使用者,也就是前端同事们,需要做这么几件事:

  1. 项目中配置好package.json,npm install安装好所需的模块
  2. 从资源管理系统中获取到各模块的cdn地址
  3. 配置项目中的各模块地址,开发环境请求本地node_modules下的文件,线上环境请求cdn。
  4. 使用gulp进行相关的构建,发布到测试环境/线上环境

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

第3步需要做一个说明,因为我们现在项目很多,各项目的目录结构也不一致,有的前后端还未分离,所以无法做到用同一套构建程序搞定所有的项目。配置的方法视项目的情况而定,可以依靠后端来动态给require.config赋值,也可以用gulp来进行编译,总之能达到在不同环境请求不同路径就行。

技术细节

sinopia的话照着文档去安装就行。因为我们是安装在服务器上,所以有两点配置需要注意:

  1. node_modules/sinopia/conf下的default.yaml中,listen: - 0.0.0.0:4873,使得其他机器可以访问到该端口
  2. 在sinopia的存储目录下,有一个config.yaml,把proxy: npmjs注掉。我们公司内部可能只维护几个特定版本,所以没必要和官方仓库同步。

sinopia有一个机制,当你从私有npm安装一个模块时,如果不存在,会从npm官方仓库拉取,也就是这个proxy配置的地址。我们注掉后,也就无法去官方仓库去拉了,而这正是我需要的。一方面通过一个代理去访问npm有不稳定的风险,另一方面,我需要使用者时刻清楚,自己安装的模块是哪个仓库的。

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

其中,类别暂时分为三类:

  1. 框架/类库。已经成熟的框架/类库,基本不会修改其代码,如jquery、requirejs
  2. 第三方组件。UI组件及功能组件,来自于第三方,不像框架那样稳定且有长期维护,例如:datepicker、弹框插件
  3. 自研模块。公司内部自己写的模块,通用的业务模块、功能模块

关于发布npm。在系统中上传源码的zip文件,先进行解压,然后使用了nodejs的child_process模块用来执行npm install命令,代码片段如下:

var exec = require(‘child_process‘).exec;
exec(‘npm publish ‘+targetPath, function (error, stdout, stderr) {
    if (error !== null) {
        console.log(‘exec error: ‘ + error);
        res.json({success: false, message: error});
    }
    res.json({success: true, message: {name: filePath} });
});

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

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

总结

搭建这个项目其实难度并不大,但由于是抽空闲时间来搞,前前后后花了两个月时间。主要是花在系统的设计上。目前还是beta版,陆续会更新内容,先运行起来让同事们尝尝,估计会有大量的建议和问题,后面再做升级吧。各位朋友有任何建议,也可以给我留言,不甚感激。最后,截图来晒一下吧:

注:本篇博客的微信公众号转发唯一授权给前端早读课,其他微信公众号不得转发,否则将受到侵权投诉。

时间: 2024-10-09 00:32:02

搭建前端私有npm杂记的相关文章

搭建公司私有npm仓库

1.安装curl.git 2.安装node 3.下载npm 4.安装mysql,创建cnpmjs数据库 5.下载cnpm文件,进行npm install 6.进入cnpmjs.org,设置数据库并添加.更改配置文件 7.运行 如果出现了以下错误,说明config目录下的两个端口号7011,7022被占用,需换端口号. 运行之后,打开浏览器,如果出现以下画面则说明成功: 8.测试使用 搭建完成之后,我们可以在自己本地下载一下看能否成功: 全局安装cnpm--npm install cnpm -g:

MacPro 使用cnpmjs搭建私有npm服务

前言 前段时间看到npm私有库cnpmjs.org,一直想试一下怎么搭建,直接就拖到现在了,太懒! 先简单介绍下cnpmjs.org吧: cnpm的意思是Company npm.根据github上的介绍,翻译过来大概是: 基于koa,MySQL和 Simple Store Service的企业npm私有库和web端. 目标是为私人NPM提供一个低成本的维护和易于使用的解决方案. 利用cnpmjs.org你可以: 1.搭建一个企业的npm私有库 2.搭建一个npm的镜像 3.搭建一个完全独立于np

使用cnpm搭建企业内部私有NPM仓库

cnpm是企业内部搭建npm镜像和私有npm仓库的开源方案.它同时解决了现有npm架构的一些问题. 为什么企业需要私有NPM 主要有如下理由: 确保npm服务快速.稳定:对于企业来说,上线生产系统的时候,需要花半小时甚至更久等待npm模块依赖安装完毕,是不可接受的.部署镜像后,可以确保高速.稳定的npm服务. 发布私有模块:官方的npm上的模块全部是开源的.一些与企业业务逻辑相关的模块可能不适合开源.这部分私有的模块放在私有NPM仓库中,使用起来各种方便. 控制npm模块质量和安全:npm上的模

使用verdaccio 搭建私有npm 服务器

原因 方便:公司内部开发的私有包,统一管理,方便开发和使用 安全:公司内部开发的代码并不想公开 加速:自建的服务器会缓存下载过的包,能节省时间 介绍 Verdaccio是一个简单的零配置所需的本地私有npm注册表.不需要整个数据库就可以开始使用!Verdaccio开箱即用,拥有自己的小型数据库,能够代理其他注册表(例如npmjs.org),沿途缓存下载的模块. 使用 1.安装 npm install --global verdaccio 或者用yarn global add verdaccio安

使用cnpm搭建私有NPM仓库 发布npm包

关于如何使用cnpm搭建私有的npm仓库看这里→ http://blog.fens.me/nodejs-cnpm-npm/ 我本人还没有机会真正实践操作过,公司的npm仓库是我老大搭建的,我这里仅仅记录关于如何发布npm包以及在这过程中出现的问题以及解决的方案. 因为官方的npm上的模块是完全开源,但是公司自己项目有些模块与业务或者逻辑以及一些配置模块肯定不能开源啊,所以需要搭建私有的npm仓库. 1.准备工作 首先安装好npm 以及 cnpm . 现在安装node.js 里会一起安装好npm.

搭建前端开发环境

采用node + grunt + bower + karma + jasmine搭建前端开发环境.(windows环境为例) 安装开发包的工具:node (安装grunt,bower,karma,karma-jasmine等开发和测试工具包) 构建工具:grunt (合并,代码检查.压缩等,以及可以插件式植入其他task) Js库依赖管理工具:bower (管理开发用到的js.css库,例如:jquery, angular,bootstrap) 测试框架:karma + jasmine 步骤一:

搭建前端的开发环境和前端开发流程总结

一.搭建前端的开发环境 1.代码编辑工具:sublime/WebStorm/HBuilder. 2.断点调试工具:Firebug. 3.版本管理工具:Git(本人建议使用git,至于原因大家可以看看相关blog),安装完成后我们就可以从github上clone一些项目. 4.代码合并和混淆工具:webpack (Webpack具有Grunt.Gulp对于静态资源自动化构建的能力,同时兼容AMD与CMD的模块加载规范). 4.开发调试工具:NodeJs.很多非常有用的工具都是基于NodeJs的,我

私有npm计划

为什么要建立私有npm 提高代码复用程度,增加团队沉淀 剥离项目依赖,工程更加轻量 引用全量更新,支持版本降级 建立模块文档,降低上手难度 全员把关代码质量,无需重复测试 构建工具已成趋势,优化发布流程,减少手动工作,提高团队效率 增强团队代码交流 内部保密机制 要做的工作 搭建私有 npm 环境 探索 npm 使用工作流 npm 对接 OA,做好权限控制 npm 上传规范制定 现有组件上传 npm 要做的改造 使用 git 维护源码库 git 与 npm publish 联动,实现自动测试.构

centos6.5 64位下安装私有npm

搭建自己的私有npm库 1.安装Couchdb [[email protected]_private ~]# yum install wget [[email protected]_private ~]# wget http://download.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm [[email protected]_private ~]# rpm -ivh --test epel-release-6-