一、需求
工具公司需要,决定搭建一个组件库。为了实用,这个组件库主要需要满足以下几点需求。
能够使用
npm
安装,支持amd规范;现代的前端早已经脱离了刀耕火种的时代。我们可以用
npm
来安装我们所需要的工具函数和组件库。当然我们也可以自己写的一些工具函数也可以用npm
来管理。能够按需引入;
很多时候对于一种大而全的类库是非常大的,而我们可能只会用到其中的一部分,如果不支持按需引入,那么这种工具库显然也是不能用的。
能够按需打包,定制我们所需要的js文件;
因为公司还存在几个老的jsp工程,这几个工程我们无法使用webpack来处理。因此我们的工具函数需要可以打包成一个js文件提供给这些老的jsp工程使用标签引入。
能够编写单元测试用例;
因为是工具函数,很多时候我们想要测试自己的函数是否正确,这里就必须要有个很方便的测试环境。
二、如何搭建npm私服库
java工程有个管理jar包的工具nexus,这个工具配合
maven
可以很方便的管理繁多的jar包。幸运的是3.0版本之后,nexus支持npm
了。我们可以用这个很轻松的搭建一个属于自己的npm
私服库。
安装nexus
nexus的安装很简单,这里附上官方的文档,这里很详细的介绍了nexus的安装步骤。我这里介绍一下
linux
版的安装步骤。
下载nexus:
这里选择你需要的版本,我下载的是
Nexus Repository Manager OSS 3.x - Unix
版的。上传到服务器并解压:
这里你可以使用ftp上传到服务器上,解压命令的为
tar -xzvf nexus-3.5.0-02-unix.tar.gz
运行nexus
nexus的可执行文件在
bin
目录下,进入到bin
目录后执行./nexus run
就可以启动nexus了。访问:
默认启动端口为
8081
,因此访问链接为服务器ip+:8081
。
环境要求
nexus需要jdk1.8以上的环境支持,你可以通过
java -version
来查看自己的服务器环境。如果版本不够或者没有安装jdk,请自行安装,安装教程网上一大堆。
创建npm资源库
nexus默认的用户名和密码是
admin
和admin123
,登录进去看到以下界面:
点击那个齿轮就可以到管理界面了
这里我们需要创建仓库点击repository->create repository。
这里我们看到三种npm仓库。从字面意思我们大概可以知道:
- hosted是本地仓库,用于存放你自己的npm资源;
- proxy是代理的意思,代理远程仓库库。
这里有个
Remote storage
字段,也就是好远程仓库,因为在国内用淘宝的镜像会快很多,我这里设置的是淘宝的镜像地址https://registry.npm.taobao.org
。
- group是一个仓库组,相当于一个仓库的集合;
group资源库底下可以看我们创建的hosted库和proxy库,group仓库主要是用来整合我们的仓库的,比如说你有三个仓库,下载不同仓库的npm包的时候,你可能需要指定不同的
registry
,有了这个我们就可以指定统一的registry
了。
测试是否成功
经过上面的步骤,我们已经创建了属于自己的npm私服仓库。我们可以用如下步骤来测试我们的私服仓库是否生效。
- 配置registry
你可以通过以下命令设置
npm config set registry http://192.168.102.12:8081/repository/proxy-test/
也可以直接修改
.npmrc
文件(这个文件一般在C盘的用户文件夹下,比如我的就在C:\Users\lenovo\.npmrc
),加上下面的配置:
registry = http://192.168.102.12:8081/repository/group-test/
当然了,也可以在项目根目录底下加一个
.npmrc
文件,文件中配置registry。
- 测试
新建一个文件夹,在文件夹中执行如下命令,就可以在执行结果中看到我们的npm私服库是否搭建成功(这里我直接从官网copy了,截图太丑。。。):
$ npm --loglevel info install grunt
...
npm http fetch GET http://localhost:8081/repository/npmjs-org/grunt/-/grunt-0.4.5.tgz
npm http fetch 200 http://localhost:8081/repository/npmjs-org/grunt/-/grunt-0.4.5.tgz
...
npm http fetch GET http://localhost:8081/repository/npm-all/underscore/-/underscore-1.7.0.tgz
npm http fetch 200 http://localhost:8081/repository/npm-all/underscore/-/underscore-1.7.0.tgz
...
提交和下载npm资源库
我们可以使用
npm init
来创建一个npm工程。接下来我们就要用npm publish
命令来发布我们的包。在此之前我们需要做一些准备。
- 添加用户
这里主要是提交包到hosted仓库,因此这里需要登录的实际上是hosted仓库,执行如下命令,然后输入用户名和密码:
npm login --registry=http://192.168.102.12:8081/repository/hosted-test/
- 提交
我们可以用如下命令来提交自己npm包到我们刚刚创建的npm私服仓库:
npm publish --registry http://192.168.102.12:8081/repository/hosted-test/
当然我们也可以在
package.json
里面添加一个配置,然后直接用npm publish
来提交:
"publishConfig" : {
"registry" : "http://192.168.102.12:8081/repository/hosted-test/"
},