likes
comments
collection
share

pnpm+monorepo+changesets+dumi 构建React组件库

作者站长头像
站长
· 阅读数 55

前言

搭建组件库，是每个前端或早或晚需要接触的内容。在此之前，我都是使用lerna来管理多包项目。但了解到pnpm workspace之后，我发现使用pnpm+monorepo+changesets方式来管理多包项目更为方便。

组件库除了第三方包的开发外，还需提供组件库的使用文档，这才是一个完整的组件库项目。因此这里我选择使用dumi搭建React的组件库

1. 初始化

新建一个文件夹并运行

npx create-dumi

有三个模块可供选择，这里选择第二项react Library

Static Site # 用于构建网站
React Library # 用于构建组件库，有组件例子
Theme Package # 主题包开发脚手架，用于开发主题包

2. 定义pnpm工作空间

新建pnpm-workspace.yaml

packages:
  - 'packages/**'
  - '!**/test/**'
  - '!**/demos/**'
  - '!**/es/**'
  - '!**/*.md'

3. monorepo项目目录结构调整

1.删除根目录下src，新建packages目录

2.在packages文件夹下新建components和hooks，分别存放组件和hook，目录结构为

└── components
    ├── src
    ├── .fatherrc.ts
    └── package.json
    └── README.md
└── hooks
    ├── src
    ├── .fatherrc.ts
    └── package.json
    └── README.md

.fatherrc.ts

import { defineConfig } from 'father';

export default defineConfig({
  platform: 'browser',
  esm: {
    transformer: 'babel',
  },
});

package.json

{
  "name": "@wjcao/components",
  "version": "1.0.0",
  "private": false,
  "description": "A react library developed with dumi",
  "homepage": "https://github.com/cwjbjy/components#readme",
  "bugs": {
    "url": "https://github.com/cwjbjy/components/issues"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/cwjbjy/components"
  },
  "license": "MIT",
  "author": "cwj <595842570@qq.com>",
  "main": "./dist/esm/index.js",
  "module": "./dist/esm/index.js",
  "typings": "./dist/esm/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "father build"
  },
  "dependencies": {
    "styled-components": "^6.1.11"
  },
  "devDependencies": {
    "@types/styled-components": "^5.1.34",
    "antd": "^5.19.0"
  },
  "peerDependencies": {
    "antd": ">=5.11.5",
    "react": ">=16.9.0",
    "react-dom": ">=16.9.0"
  },
  "publishConfig": {
    "access": "public"
  }
}

private，publishConfig：设置为非私有包，面向公众（私有包npm会收费）

main，module：指向打包后的入口文件

typings：指向打包后的TS声明文件

files：需要上传npm的文件夹（package.json与README.md会默认上传）

peerDependencies：平级依赖，即使用该包不需要额外下载react，使用项目本身的react包即可

4. 修改全局样式

dumi的默认样式可能不满足需求，可在.dumi下新建global.less

::-webkit-scrollbar {
  width: 10px;
  height: 10px;

  &-thumb {
    background-color: rgba(0, 0, 0, 0.12);
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: padding-box;
    &:hover {
      background-color: rgba(0, 0, 0, 0.24);
    }
  }
  &-track {
    background-color: transparent;
  }
}

.dumi-default-doc-layout {
  .dumi-default-header-content {
    max-width: 2000px;
  }

  > .dumi-default-doc-layout-mobile-bar + main {
    max-width: 2000px;
    // margin: unset;
    .markdown {
      font-size: 15px;
    }
  }

  .dumi-default-sidebar {
    top: 76px;
    width: 256px;
    overflow: overlay;

    dl > dd {
      padding: 6px 0;

      & > a {
        font-size: 15px;
      }
    }
  }
}

5. 配置dumi

dumi默认为单项目管理。多项目管理需额外配置。

修改.dumirc.ts

import { defineConfig } from 'dumi';
import { join } from 'path';
const basePath = '/docs/';

export default defineConfig({
  themeConfig: {
    name: '前端文档',
    //头部菜单栏
    nav: [
      {
        title: '规范',
        link: '/spec',
      },
      {
        title: 'components',
        link: '/components',
      },
      {
        title: 'hooks',
        link: '/hooks',
      },
    ],
    prefersColor: { default: 'light', switch: true }, //主题色
    socialLinks: { 
      github: 'https://github.com/cwjbjy?tab=repositories',
    },
  },
  outputPath: 'docs-dist', //打包后文档的包名
  base: basePath,
  publicPath: basePath,
  hash: true,  //文档包名是否生成hash，防止浏览器缓存
  //解析目录
  resolve: {
    docDirs: ['docs'], //配置 Markdown 文档的解析目录
    atomDirs: [
      //配置子项目（例如组件、函数、工具等）Markdown 的解析目录。
      { type: 'components', dir: 'packages/components/src' },
      { type: 'hooks', dir: 'packages/hooks/src' },
      // { type: 'tools', dir: 'packages/tools/src' },
    ],
  },
  //别名：dumi 2不再感知 monorepo,需要手动配置包名到 src 的 alias。
  alias: {
    '@wjcao/components': join(__dirname, 'packages/components/src'),
    '@wjcao/hooks': join(__dirname, 'packages/hooks/src'),
    // '@wjcao/utils': join(__dirname, 'packages/tools/src'),
  },
});

6. 配置Eslint

1. 在根目录安装

pnpm add -D eslint-plugin-import -w

2. 修改.eslintrc.js

module.exports = {
  extends: require.resolve('@umijs/lint/dist/config/eslint'),
  plugins: ['react-hooks', 'import'],
  ignorePatterns: ['dist', 'node_modules', '.eslintrc.js'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    '@typescript-eslint/no-unused-vars': 'warn',
    '@typescript-eslint/no-unused-expressions': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    '@typescript-eslint/ban-types': 'warn',
    'react/no-array-index-key': 'off',
    '@typescript-eslint/no-shadow': 'off',
    '@typescript-eslint/consistent-type-imports': 'off',
    '@typescript-eslint/method-signature-style': 'off',
    '@typescript-eslint/no-invalid-this': 'off',
    'import/no-duplicates': 'error',
    'no-redeclare': 'off',
    'no-console': [
      'warn',
      {
        allow: ['warn', 'error'],
      },
    ],
    'no-debugger': 'warn',
    'import/order': [
      'error',
      {
        groups: [
          'builtin',
          'external',
          'internal',
          ['parent', 'sibling', 'index'],
          'object',
          'type',
          'unknown',
        ],
        pathGroups: [
          {
            pattern: 'react*',
            group: 'builtin',
            patternOptions: {
              noComment: false,
            },
            position: 'before',
          },
          {
            pattern: '*/**/*.less',
            group: 'type',
            position: 'after',
          },
          {
            pattern: '*/**/*.css',
            group: 'type',
            position: 'after',
          },
          {
            pattern: '@components/**',
            group: 'external',
            position: 'after',
          },
          {
            pattern: '@hooks/**',
            group: 'external',
            position: 'after',
          },
        ],
        pathGroupsExcludedImportTypes: [],
        'newlines-between': 'always',
        alphabetize: {
          order: 'asc',
          caseInsensitive: true,
        },
      },
    ],
  },
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
        'no-undef': 'off',
      },
    },
  ],
};

7. 配置.gitignore

node_modules
dist
docs-dist
.dumi/tmp
.dumi/tmp-test
.dumi/tmp-production
.DS_Store

8. 配置tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "stripInternal": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "declaration": true,
    "baseUrl": ".",
    "paths": {
      "@@/*": [".dumi/tmp/*"],
      "@wjcao/components/*": ["./packages/components/src/*"],
      "@wjcao/hooks/*": ["./packages/hooks/src/*"]
    }
  },
  "include": [".dumirc.ts", "packages/**/*"],
  "exclude": ["node_modules", "dist", "docs-dist"]
}

9. 打docs包

运行 pnpm run docs:build，会生成docs-dist文件

运行 pnpm run docs:preview，可预览

10. 打包

1. 全部打包

pnpm -r build

2. 部分打包

pnpm run build -F @wjcao/components

-F 后面的参数为子包package.json的name值

11. 配置changesets

pnpm+monorepo负责管理包的依赖，changesets 负责管理包的version和生成changelog

1. 安装

pnpm add -D @changesets/cli -w

2. 初始化

pnpm changeset init

只需要将access的值restricted，改为public（开源）

config.json其他配置：

指令功能
commit不要让 changeset 在 publish 的时候帮我们做 git add
linked配置哪些包要共享版本
access公私有安全设定，内网建议 restricted ，开源使用 public
baseBranch项目主分支
updateInternalDependencies确保某包依赖的包发生 upgrade，该包也要发生 version upgrade 的衡量单位（量级）
ignore不需要变动 version 的包

3. 生成变更记录

pnpm changeset

在生成时，会提示是否生成 major 模式，即大版本变更1.2.3的1；不选择，直接回车，会提示是否生成minor模式，即中版本变更1.2.3的2；不选中直接回车，默认选则patch模式，即小版本变更1.2.3的3

4. 消耗变更记录并更新版本

pnpm changeset version

5. git记录中会生成一个tag

pnpm+monorepo+changesets+dumi 构建React组件库

6. 推送tag

git push origin @wjcao/components@1.0.1

11. 发包

  1. 首先注意components/package.json中是否有公共包的配置
"private": false,
"publishConfig": {
  "access": "public"
 },

  1. 提交git，并保存

  2. 如果以前改过npm的镜像地址，比如使用了淘宝的镜像，就先改回来

npm config set registry=<https://registry.npmjs.org>

  1. 登录npm：npm login（如果没有首先注册，并且验证邮箱）

  2. 访问npm：www.npmjs.com/org/create 创建命名空间，例如：wjcao

  3. 运行：pnpm changeset publish

  4. 在其他react项目中安装：pnpm add @wjcao/components

12. 发布npm包时可能遇到的报错信息与解决方案

邮箱未验证

npm ERR! publish Failed PUT 403 npm ERR! code E403 npm ERR! you must verify your email before 
publishing a new package: <https://www.npmjs.com/email-edit> : your-package

去邮箱验证

没有权限发布

npm ERR! publish Failed PUT 403 npm ERR! code E403 npm ERR! You do not have permission to 
publish "your-package". Are you logged in as the correct user? : your-package

包和别人的包重名了。修改包名

需要登录

npm ERR! code ENEEDAUTH npm ERR! need auth auth required for publishing npm ERR! need auth You need to authorize this machine using `npm adduser`

使用 npm login 登录

只有管理员才有权限发布

npm ERR! publish Failed PUT 403 npm ERR! code E403 npm ERR! \[no\_perms] Private mode enable, 
only admin can publish this module \[no\_perms] Private mode enable, only admin can publish 
this module: your-package

源设置成第三方源，比如设置了淘宝镜像。只要把源设为默认的即可

npm config set registry registry.npmjs.org

包名过于类似

npm ERR! publish Failed PUT 403 npm ERR! code E403 npm ERR! Package name too similar to 
existing packages; try renaming your package to '@hopgoldy/auto-git' and publishing with 'npm 
publish --access=public' instead : your-package

无法发布私有包

npm ERR! publish Failed PUT 402 npm ERR! code E402 npm ERR! You must sign up for private 
packages :

这个当你的包名为@your-name/your-package时才会出现，原因是当包名以@your-name开头时，npm publish会默认发布为私有包，但是 npm 的私有包需要付费，所以需要添加如下参数进行发布:

npm publish --access public

或者在package.json中添加

"publishConfig": {
  "access": "public"
},

包的命名空间

lerna ERR! E404 Scope not found

点击链接创建包的命名空间：www.npmjs.com/org/create

结尾

本篇只提供了配置过程，如果对配置不清楚，或有问题的，可在评论区留言

具体的React库开发如果有需要，也可在评论区留言，如果看到有需求的小伙伴，后续我会继续更相关文章

转载自:https://juejin.cn/post/7387610960159129612
评论
请登录