概览

• 组件库搭建框架：umijs
• pnpm + changesets

workspace 下的 package 相互依赖

pnpm -F @tz/xxa add @tz/xxb

搭建 npm 私有源的方式有：

1. verdaccion 搭建
2. Git 仓库作为私有源：github package、gitlab package
3. cnpm 搭建

pnpm + changesets 的 monorepo

基于 pnpm + changesets 的 monorepo 最佳实践

发布组件需要先登录到私有源，修改组件源码后需要发布新版本时流程如下：

1. 初始化 changeset

   • pnpm changeset init

2. 生成 changeset

   • 执行 pnpm changeset 并根据命令行提示选择需要发布的 package 及填写变更记录

3. 更新被发布包 package.json 的 version 字段

   • 执行 pnpm run version，该命令会修改准备发布包的 package.json 中的 version 字段并更新 CHANGELOG.md

4. publish 到 npm 私有源

   pnpm run publish

   发布成功后可以在浏览器上输入<私有源地址>查看组件列表

5. 组件安装

   • 安装 @tz/* 不需要登录私有源（可配置），直接使用 npm install @tz/xx，其他包管理同理。

6. 撤销已发布组件

   npm unpublish @tz/hooks --force

7. 组件相互依赖

   • package 项目依赖，如 @tz/antd 需要引用 @tz/utils，在项目根目录下执行：
   • pnpm -F @tz/antd add @tz/utils

组件打包

entry: {
    "ml-button": path.resolve(__dirname, "../src/components/button/index.js")
  },
  output: {
    path: path.resolve(__dirname, "../lib"),
    filename: "[name]/index.js",
    libraryTarget: "umd"
  },

组件配置了browser，引用组件的项目打包时会使用browser配置的umd.js，会将没有用到得代码一起打包，

有让项目使用组件的index.js（es module）作为组件入口才不会将没有用到的代码打包，commonjs 也会打包没有使用的代码

每个icon组件都要单独export，这样项目中没有用到的icon就不会被打包

package.json 中配置 type: module 没啥用

如果组件内使用了style/var.less 中的变量，并且不用lib作为组件入口，需要在使用该组件的项目中配置style-resources-loader并引入 @pic/style/var.less

npm pack命令进行本地模拟打包测试，在项目根目录下就会生成一个tgz的压缩包，这就是将要上传的文件内容。

verdaccion 搭建

Verdaccio 配置

配置文件 ~/.config/verdaccio/config.yaml

uplinks:
  npmjs:
    url: https://registry.npmjs.org/
  xnpmjs:
    url: http://registry.x.com 
packages:
  '@xscope/modulea':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: xnpmjs // proxy 代表如果在私有 npm 库找不到，则会代理到 npmjs

修改服务path

verdaccio内部使用了express，服务启用在了uri根路径，这样比较浪费资源。增加配置:

url_prefix: /npm/

开发环境配置私有源

1. 配置本机 npm registry

npm config set @tz:registry <私有源地址>

如：npm config set @zl:registry http://12.12.12.12:8080， 该配置只会影响 @zl 前缀的 npm 包，如 react 之类的公共包不受影响，也不影响 nrm 使用。

将 @zl 映射到指定 registry，之后执行 npm install @zl/xx 时从指定 registry 上安装

初始化一个带 scope 的 package

npm init --scope=@mycorp --yes

2. 登录到私有源

npm login --registry http://xxx:4873

# log in, linking the scope to the custom registry
npm login --scope=@mycorp --registry=https://registry.mycorp.com

这里需要输入账号密码，一般由管理员提供，登录后可以进行组件 publish、unpublish 操作。

npm login 只校验了 name password，没有校验 email，每次 login 可以输入不同的 email

3. 登出私有源

npm logout --registry=https://registry.mycorp.com

# log out, removing the link and the auth token
npm logout --scope=@mycorp

4. 组件开发项目配置

在组件库项目根目录添加 .npmrc 文件，添加局部私有 npm 配置

engine-strict=true
save-prefix=
# 私有源地址
@zl:registry=http://localhost:4873

快速开发

使用npx link命令做本地代码调试，不需要频繁发布安装

• 某个组件目录下执行 npx link
• 需要引用该组件的项目根目录下执行 npx link 该组件名

组件发布安装

发布组件需要先登录到私有源，修改组件源码后需要发布新版本时流程如下：

1. 生成 changeset

执行 pnpm changeset 并根据命令行提示选择需要发布的 package 及填写变更记录

2. 更新被发布包 package.json 的 version 字段

执行 pnpm run version，改命令会修改准备发布包的 package.json 中的 version 字段并更新 CHANGELOG.md

3. publish 到 npm 私有源

# 需要在组件库项目根目录添加 .npmrc 文件
npm run publish
# 或者
npm publish --registry http://localhost:4873

发布成功后可以在浏览器上输入 <私有源地址> 查看组件列表

4. 组件安装

安装 @tz/* 不需要登录私有源（可配置），直接使用 npm install @tz/xx，其他包管理同理。

5. 撤销已发布组件

npm unpublish @tz/hooks --force

账号管理

账号注册、删除、登录htpsaawd-for-sinopia

通过 htpsaawd-for-sinopia 添加账号

npm install htpasswd-for-sinopia -g
sinopia-adduser  # 在 htpasswd 目录下执行

1. 添加用户

npm adduser --registry  http://localhost:4873

常用命令

npm whoami
npm config ls
npm config set registry https://registry.npmjs.org/
npm config set @myco:registry http://reg.example.com
npm set registry https://registry.npm.taobao.org

npm owner // 管理npm包的所有者
npm profile set password --registry http://0.0.0.0:4873/

npmignore过滤文件了

npm publish
npm unpublish [\<package-spec\>]

部署 Verdaccio

Docker + Verdaccio 搭建Npm私有仓库

Docker + Verdaccio 搭建Npm私有仓库

其他

verdaccio搭建npm私有源 ：nginx 代理配置

npm 私有仓库工具 Verdaccio 搭建 : 博客

Gitlab Package Registry

使用 gitlab 的 package registry 功能实现 npm 私有源，组件源码项目可以使用 monorepo 结构，组件发布安装与其他 npm registry 没有区别（暂时没发现）

.npmrc 配置

# 私有源地址
@zl:registry=https://gitlab.com/api/v4/projects/52812585/packages/npm/
//gitlab.com/api/v4/projects/52812585/packages/npm/:_authToken="glpat-4jvu2R5etMDtVXJsDx33"

Git仓库作为私有源

Gitlab v13.7.x 自带私有仓库，只需要开启 Container Registry

这个方法得益于，npm提供的的丰富安装方法。通过下面方法安装：

npm i -S git+ssh://git@git.showgold.cn:npm/hello.git
npm install -S git+https://isaacs@github.com/npm/npm.git
npm install -S git://github.com/npm/npm.git#v1.0.27

• ⚠️ 上面安装需要注意，你的工程一定是在某一个组下面建立，方便管理，在生成你的包的时候package.json中的name一定要带上范围
• ⚠️ 带版本信息的，必须通过 git 打 tag
• 特点
  • 不用搭建服务
  • 使用 npm update 是无法更新私有模块，想更新只能重新安装一次