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

一、需求

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

1. 能够使用npm安装，支持amd规范；

   现代的前端早已经脱离了刀耕火种的时代。我们可以用npm来安装我们所需要的工具函数和组件库。当然我们也可以自己写的一些工具函数也可以用npm来管理。

2. 能够按需引入；

   很多时候对于一种大而全的类库是非常大的，而我们可能只会用到其中的一部分，如果不支持按需引入，那么这种工具库显然也是不能用的。

3. 能够按需打包，定制我们所需要的js文件；

   因为公司还存在几个老的jsp工程，这几个工程我们无法使用webpack来处理。因此我们的工具函数需要可以打包成一个js文件提供给这些老的jsp工程使用标签引入。

4. 能够编写单元测试用例；

   因为是工具函数，很多时候我们想要测试自己的函数是否正确，这里就必须要有个很方便的测试环境。

二、如何搭建npm私服库

java工程有个管理jar包的工具nexus，这个工具配合maven可以很方便的管理繁多的jar包。幸运的是3.0版本之后，nexus支持npm了。我们可以用这个很轻松的搭建一个属于自己的npm私服库。

安装nexus

nexus的安装很简单，这里附上官方的文档，这里很详细的介绍了nexus的安装步骤。我这里介绍一下linux版的安装步骤。

1. 下载nexus：

   这里选择你需要的版本，我下载的是Nexus Repository Manager OSS 3.x - Unix版的。

2. 上传到服务器并解压：

   这里你可以使用ftp上传到服务器上，解压命令的为tar -xzvf nexus-3.5.0-02-unix.tar.gz

3. 运行nexus

   nexus的可执行文件在bin目录下，进入到bin目录后执行./nexus run就可以启动nexus了。

4. 访问：

   默认启动端口为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.tgznpm 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.tgznpm 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/"},