前端工程化 – 私库Verdaccio搭建与使用

一个成熟的科技企业 or 技术个人，应该有自己的私库

工作中遇到不止一次这样的问题：由于某些业务需求或者技术特性，需要更改下载下来的第三方库，列如：

引入fastclick后IOS的input聚焦延迟的兼容性问题，当npm i fastclick后（或者外链引入），需要手动改fastclick里面的源码

/**
     * @param {EventTarget|Element} targetElement
     */
    FastClick.prototype.focus = function (targetElement) {
        var length;

        // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don t have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can t be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
        if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf( date ) !== 0 && targetElement.type !==  time  && targetElement.type !==  month ) {
            length = targetElement.value.length;
            targetElement.focus();
            targetElement.setSelectionRange(length, length);
        } else {
            targetElement.focus();
        }
    };

此时之后项目团队中别人重新install或者再次引入同个包又会有新的问题，当然可以在引入时采用如下做法：

import FastClick from  fastclick ;
FastClick.attach(document.body);
FastClick.prototype.focus = (ele) => {  use strict ; ele.focus(); }; //修改focus()方法

如果有自己的（企业自己的）私库，那么用这个私库不就没有这个问题了吗？

同样的，在使用pdf相关的库中也存在要修改源码的情况，在此不做赘述

这样，搭建私库就很有必要了

Verdaccio安装与启动

有两法，要么npm方式，要么docker方式，异曲同工，需要准备好对应环境，在这介绍docker方式

$ docker pull verdaccio/verdaccio

在服务器新建文件夹，以对应放置verdaccio的配置及库所在位置，同时更改权限，让verdaccio能在此位置进行文件读写

$ mkdir /home/kilims/docker/verdaccio
$ chown -R 10001:65533 /home/kilims/docker/verdaccio
$ docker run --name verdaccio -itd -v /home/kilims/docker/verdaccio:/verdaccio -p 4873:4873 verdaccio/verdaccio

位置、端口号视需要更改

跑完就能起来了，在对应起的端口处可以看得到 （本地为例子：http://localhost:4873/）
且在对应的/home/kilims/docker/verdaccio下，你会看到多了三个文件夹

drwxr-xr-x 2 10001 65533 4096 Apr 28 16:37 conf
drwxr-xr-x 2 10001 65533 4096 Mar 31 15:03 plugins
drwxr-xr-x 3 10001 65533 4096 Apr  2 17:48 storage

附相关docker命令

$ docker ps
$ docker inspect verdaccio
$ docker start / stop / resart verdaccio

配置用户权限

官网的说明文档在这里https://verdaccio.org/docs/en/packages

• 默认只有三种权限，all, authenticated, anonymous（即所有）
• 可配置哪些用户才能(access)，哪些用户才能（publish），哪些用户才能(unpublish)
• 默认可注册

简单来说权限简单而不简陋，基本够用，如果需要更复杂的角色配置，也对应有插件，可自网搜https://verdaccio.org/docs/en/plugin-auth

我一般只需要：

• 只有登陆用户才能access到上传的包
• unpublish权限剃掉
• 不能随意让人都注册上去（即关闭注册权限）

在对应的conf文件夹下，有一个config.yaml文件

不允许注册

auth:
  htpasswd:
    file: /verdaccio/storage/htpasswd
    # Maximum amount of users allowed to register, defaults to "+infinity".
    # You can set this to -1 to disable registration.
    # max_users: 1000
    # max_users: -1  // 当为-1，则不允许注册

只有登陆用户才能access到上传的包 + unpublish权限剃掉

 ** :
access: $authenticated
publish: $authenticated
# unpublish: $authenticated

日常使用

注册

npm adduser --registry http://**.**.**.**:4873

上传包

npm publish --registry http://**.**.**.**:4873

下载包

npm i -g <package-name> --registry http://**.**.**.**:4873

unpublish包

npm unpublish <package-name> --force

嫌麻烦可以：

npm set registry http://localhost:4873/

由于proxy默认是npmjs，即如果该verdaccio没找到对应的包，会从npmjs中央仓库找，如果想改成taobao仓库，自修