前端工程化 - 私库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仓库，自修