❌

阅读视图

发现新文章，点击刷新页面。

如何从0到1搭建基于antd的monorepo库——子包初始化（二）

✇掘金 前端
Kincy

文章系列

上一章：# 如何从0到1搭建基于antd的monorepo库——初始化（一）

作者有话说

目前已经实现了一部分功能，源代码在 github，欢迎大家 Star 和 PR，一些待实现的功能都在 issue 中，感兴趣的同学可以一起加入进来。

看完这个系列可以收获什么：

  1. 如何使用 pnpm workspace + lerna 搭建 monorepo 仓库
  2. antd 的单个组件怎么进行文件结构的设计
  3. 基于 antd form 实现一个 Json 渲染表单
  4. antd 的打包方式以及如何使用 rollup 实现
  5. 如何发布 monorepo 包到 npm

前瞻

组件库技术选型：

  1. pnpm 10
  2. node 20
  3. lerna 8
  4. react 18
  5. antd 5
  6. dumi 2

正片开始

basic 包初始化

修改 package.json 文件。

{
  "dependencies": {
    "@ant-design/icons": "^6.0.0"
  },
  "devDependencies": {
    "typescript": "^5.8.2"
  },
  "peerDependencies": {
    "antd": "catalog:",
    "react": "catalog:",
    "react-dom": "catalog:"
  },
}

运行 pnpm i 安装依赖。

在根目录下新增 tsconfig.json 文件。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@kc-components/*": ["packages/*/src"]
    },
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "skipLibCheck": true,
    "types": ["react", "react-dom"],
    "strict": true,
    "noImplicitAny": false,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "inlineSources": true,
    "importHelpers": false
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "es", "lib"]
}

在根目录下新增 src 文件夹，以及 src/index.ts 文件。

utils 包初始化

修改 package.json 文件。

{
  "devDependencies": {
    "typescript": "^5.8.2"
  },
}

执行 pnpm i 安装依赖。

新增 tsconfig.json 文件。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@kc-components/*": ["packages/*/src"]
    },
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "skipLibCheck": true,
    "types": ["react", "react-dom"],
    "strict": true,
    "noImplicitAny": false,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "inlineSources": true,
    "importHelpers": false
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "es", "lib"]
}、

新增 src 文件夹，以及 src/index.ts 文件。

总结

至此，整个组件库的架子已经搭好，接下来，我们将会基于 antd form 实现一个 Json 渲染表单组件。

如果想提前知道更多内容可以直接查看github，欢迎大家 Star 和 PR，如有疑问可以评论或私信。

❌