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

一、需求

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

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

建立一个前端的工具库---搭建篇相关推荐

推荐一些有趣实用的前端可视化工具库，助力可视化开发
前言前端可视化一直是人们常谈到的词,随着SVG,Canvas,WebGL等技术的发展,也涌现了一大批的优秀的可视化库.本文将从中选择一些有趣实用的推荐给大家,工具使用好了,开发效率自然也就提升了. ...
前端常用工具库方法整理
前言在闲余的时间整理一份我们可能用到的前端工具库方法. 依赖库名称 cropperjs 图片裁剪 exif-js.lrz 图片旋转问题 html2canvas dom转图片 nprogress 路 ...
Struts2介绍(一个大的工具库)
Struts2介绍 Struts2是Struts的第二代产品,以WebWork为核心,采用拦截器的机制处理用户请求,使业务逻辑控制器能与Servlet API完全脱离.Struts1采用Servlet ...
用python写一个ip查询工具库
首先附上一张高清有码的图,效果如图所示. 最近喜欢上了Python,总想用python搞点事情. 写此工具的目的最近一段时间遇见过不少钓鱼网站,于是乎就在想,这些网站的服务器都在哪里? 为何如此猖獗 ...
搭建Vue.js环境，建立一个简单的Vue项目
基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...
十大常用web前端UI组件库，赶紧收藏
今天主要介绍web前端常用的UI库,这些网站基本都是背靠互联网大厂,值得web前端开发者收藏,当然还是要多多学习使用. Vant 一款有赞出品轻量.可靠的的移动UI组件库,目前支持 Vue2.Vue3 ...
前端构建工具gulpjs的使用介绍及技巧（转）
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
[转]前端构建工具gulpjs的使用介绍及技巧
本文转自:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非 ...
前端构建工具gulpjs的使用介绍及技巧
转载自:无双的博客园原文地址:http://www.cnblogs.com/2050/p/4198792.html gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂 ...

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

一、需求

二、如何搭建npm私服库

安装nexus

环境要求

创建npm资源库

测试是否成功

提交和下载npm资源库

建立一个前端的工具库---搭建篇相关推荐

最新文章

热门文章