前端基建-搭建私有npm库

931 阅读2分钟

1. 一行代码部署私服

先思考几个问题
  为何需要搭建私服 高效稳定npm服务 私有模块更加安全 CICD...
  如何选择 社区主要三种工具 nexus verdaccio和cnpm
  权限如何控制 

// 通过对比我们选择使用verdaccio一行代码搭建npm私服
npm install -g verdaccio
// 启动 或者使用pm2启动 pm2 start verdaccio
verdaccio

2. 配置文件config.yaml

verdaccio.org/docs/zh-CN/…

// 启动verdaccio之后访问http://0.0.0.0:4873/
// 配置文件我们一般关注几部分
    storage 存储
    Authentication配置auth进行用户管理
    uplinks 配置上行链路 设置taobao源
    packages 包的管理 可以设置包的上传下载的权限
    notify 通知 消息推送
// cat ~/.config/verdaccio/config.yaml 查看配置信息

// 配置上行链路
uplinks: # 配置上流的npm服务器 主要用于请求的库不存在时可以去到上流服务器去获取
  npmjs:
    url: https://registry.npmjs.org/
    agent_options: #代理的配置项
      keepAlive: true
      maxSockets: 40
      maxFreeSockets: 10
  taobao: # 配置taobao源
    url: https://registry.npm.taobao.org/
    timeout: 10s

3. 用户管理

auth:
  htpasswd:
    file: ./htpasswd #保存用户的账号信息
    max_users: -1  #默认注册人数最大数量是1000 改为-1
  # 扩展插件 ldap groupnames 与 ldap 插件配合
  simplegroup: # 这里自定义用户组 第三方插件verdaccio-simplegroup
    $demoPublish: [liu, zhou] # 简单的分组
    $demoUnPublish: [liu, zhou]
    $testPublish: liu, zhou, test
    
// verdaccio认证 基于verdaccio-htpasswd
// 在配置项auth中 默认注册人数为max_users:1000
npm adduser --registry http://localhost:4873
// 将max_users: -1设置为-1关闭注册 使用sinopia添加账号
npm install htpasswd-for-sinopia -g
// 在 htpasswd 目录执行添加命令
sinopia-adduser
// 在packages中设置access publish unpublish

4. 权限控制

packages: # 配置模块 access访问下载权限 pushlish包的发布权限
  '@demo/*': # @/表示某项目 关键字匹配
    # scoped packages 配置权限管理
    access: $all # 表示哪一类用户可以对匹配的项目安装
    publish: $authenticated # 发布
    unpublish: $authenticated
    proxy: npmjs # 如果不存在 可以去对应的uplinks去拉取
  'npmuser-*':
    access: npmuser
    publish: npmuser 
  'test': # *匹配项目名称 名称在package.json文件中有定义    
    access: $all  # 允许所有的用户包含未身份验证的用户读取和发布包
    publish: $authenticated # 可以指定 所有 匿名 验证过的
    unpublish: $authenticated
    proxy: npmjs
  '**':
    access: $all
    publish: $authenticated
    proxy: npmjs

5. 包管理(发布)

// 设置源 npm config set  使用nrm管理 
npm install -g nrm
nrm add test http://localhost:4873
nrm use test
npm adduser --registry http://localhost:4873 // 添加用户
npm login --registry=http://localhost:4873 // 登录
// 包的版本如何管理? 0.0.1
npm publish --registry http://localhost:4873 // 发布
npm unpublish npm-test

6. 消息推送

// 使用配置文件中提供的notify 当发布包之后推送消息
# 通知 接入飞书机器人
notify:
  "frontend-feishu":
    method: POST
    headers: [{'Content-Type': 'application/json;charset=utf-8'}]
    # 飞书群添加自定义机器人
    endpoint: https://open.feishu.cn/open-apis/bot/v2/hook/31d935e0-a350-4355-aac1-767c1e437ec7
    # 推动的消息
    content: '{"msg_type":"text","content":{"text":"New package published: `{{ name }}{{#each versions}} v{{version}}{{/each}}`"}}'

npm内部机制和核心原理

1. 前端工程化离不开npm(node package manager)或者yarn管理工具,
    我们一般会通过npm安装维护依赖(npm install),
    还可以通过npm script脚本串联职能部分(npm run dev)
2. 我们先思考一些问题: 
    项目用npm还是yarn好 
    lock文件是否需要提交到仓库 
    项目依赖出现问题为什么删除大法可以解决问题 这样会导致什么问题(是否规范)
    devDependencies和dependencies有什么区别 如何选择
    配置优先级 项目级的 .npmrc 文件 > 用户级的 .npmrc 文件> 全局级的 .npmrc 文件 > npm 内置的 .npmrc 文件
    
3. npm安装机制
	同一个项目团队 应该保证npm版本一致
    npm install检查config 判断是否有lock文件
    1.有lock文件 是否和package.json声明版本一致 一致就检查缓存解压到node_modules 版本不一致 当安装版本兼容 根据lock文件安装不兼容按照package文件安装并更新package.lock文件
    2.无lock文件 获取包信息 构建依赖项 检查缓存 下载包资源 检查完整性 添加到缓存 解压到node_modules 生成locak文件
    
4. npm的缓存机制
	对于一个依赖包的同一版本进行本地化缓存是依赖包管理工具的常见设计 npm config get cache (/Users/liuxs/.npm)
    npm install --cache-min 9999999 <package-name> 用于从缓存目录安装模块
    npm-cache install
    
    在npm install的过程中 通过pacote把相应的包解压到对应的node_modules下面 npm在下载依赖时先下载到缓存当中 再解压到项目node_modules下 pacote根据npm-registry-fetch下载包 可以设置cache属性
    lock文件中存储的 integrity、version、name 信息生成一个唯一的 key key可以找到对应的index-h5目录下的缓存目录 有缓存资源就找到tar包的hash根据hash去找缓存的包 将二进制文件解压到相应项目的node_modules下面 省去网络下载资源的开销
    1.在lock文件中找到resolved地址
    2.在缓存目录下找到对应的hash值ae/ad/e36bb05dedf314328c866af1e2f0417066c60ca44947944cd912e5490430 并且前4位用来分目录,为了在文件系统中能快速查找 sha256得到的结果
    3.获取对应的内容 可以得到metadata中的_shasum
    4.根据_shasum在content-v2目录下查找对应hash文件
    
    如何实现离线安装?
    
5. npm init 发生了什么
	调用shell脚本输出一个初始化的package.json文件 我们可以自定义init命令(node脚本)
    module.exports 即为 package.json 配置内容
6. npm link
	可以高效的在本地调试验证包的可用性 将模块链接到对应的业务项目中运行
7. npx
	直接执行node_modules/.bin文件夹下的文件 npx 可以自动去 node_modules/.bin 路径和环境变量 $PATH 里面检查命令是否存在 不需要在package.json定义相关的script
    npx在执行模块时会优先安装依赖 安装执行后会删除(避免全局安装)
8. nrm(npm registry manager) npm的镜像源管理工具
    查看可选源 nrm ls 当前使用源 nrm current 切换 nrm use taobao 删除 nrm del 测试nrm test