零基础学习monorepo：从头搭建monorepo组件库

前端

2023-09-29 11:11:53

从零开始：剖析monorepo和组件库

在正式搭建monorepo组件库之前，我们先来了解一下monorepo和组件库的概念。

monorepo

monorepo是指将所有代码放在一个版本控制库中进行管理。这种集中化的管理方式有利于团队合作、代码复用和版本控制。

组件库

组件库是一组可重用的组件，可帮助开发人员快速搭建用户界面。组件库通常包括按钮、文本框、下拉菜单等常见组件，也有助于团队间的组件交流。

搭建monorepo组件库：分步指南

下面，我们将一步步搭建一个monorepo组件库，帮助你充分利用monorepo和组件库的优点，开启更高效的开发体验。

1. 搭建脚手架

准备工作

安装Node.js和Yarn包管理器。
创建一个新的文件夹，作为项目根目录。

初始化项目

yarn init -y

安装lerna

yarn add lerna -D

初始化lerna

lerna init

2. 添加组件库

创建组件库文件夹

mkdir packages/component-lib

初始化组件库

cd packages/component-lib
yarn init -y

安装dumi

yarn add dumi -D

初始化dumi

dumi init

3. 搭建组件

创建组件文件夹

mkdir src/components

创建第一个组件

touch src/components/Button.js

编写组件代码

import React from 'react';

const Button = ({ children, onClick }) => {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

编写文档

touch src/components/Button.md

---
title: Button 组件
---

## 介绍

Button 组件是一个简单的按钮组件，可用于触发事件。

## 用法

import Button from './Button';

const App = () => {
return (

<Button onClick={() => { console.log('Clicked!') }}>
点击我

);
};

4. 发布组件库

构建组件库

cd packages/component-lib
yarn build

发布组件库到npm

lerna publish

5. 使用组件库

安装组件库

yarn add component-lib

使用组件库

import Button from 'component-lib/Button';

const App = () => {
  return (
    <div>
      <Button onClick={() => { console.log('Clicked!') }}>
        点击我
      </Button>
    </div>
  );
};