首页 IT技术内容详情

建立一个前端的工具库---搭建篇

2021-10-22 52901 小付

一、需求

工具公司需要,决定搭建一个组件库。为了实用,这个组件库主要需要满足以下几点需求。


能够使用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/

1

也可以直接修改.npmrc文件(这个文件一般在C盘的用户文件夹下,比如我的就在C:\Users\lenovo\.npmrc),加上下面的配置:


registry = http://192.168.102.12:8081/repository/group-test/

1

当然了,也可以在项目根目录底下加一个.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

...

1

2

3

4

5

6

7

8

9

提交和下载npm资源库

我们可以使用npm init来创建一个npm工程。接下来我们就要用npm publish命令来发布我们的包。在此之前我们需要做一些准备。



添加用户

这里主要是提交包到hosted仓库,因此这里需要登录的实际上是hosted仓库,执行如下命令,然后输入用户名和密码:

npm login --registry=http://192.168.102.12:8081/repository/hosted-test/

1


提交

我们可以用如下命令来提交自己npm包到我们刚刚创建的npm私服仓库:


npm publish --registry http://192.168.102.12:8081/repository/hosted-test/

1

当然我们也可以在package.json里面添加一个配置,然后直接用npm publish来提交:


"publishConfig" : {

  "registry" : "http://192.168.102.12:8081/repository/hosted-test/"

},

————————————————

版权声明:本文为CSDN博主「chaos_hf」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/chaos_hf/article/details/78668539


相关标签: # vue

 暂无评论,快来抢沙发吧~

发布评论