一个系统拥有大量的业务场景和业务代码,相似的页面和代码层出不穷,如何管理和抽象这些相似的代码和模块,这肯定是诸多团队都会遇到的问题。是不断拷贝代码还是抽象成 UI 组件或业务组件?显然后者更高效。

除了以上提到的之外,我想很多人都想有一个自己的组件库作为自己的简历项目或者是兴趣爱好,那么如何开始搭建又成了一个很重要的问题,这里就涉及到大量的配置,我曾经也为这个问题感到困惑。

为了解决这个问题,我写了一个脚手架,它叫 Create-neat 通过该链接可以查看到具体信息。

创建项目

要想创建项目,首先在你想要创建项目的路径当中进入到终端命令当中执行以下操作:

npx create-neat design

当执行完成之后,如果出现以下界面说明命令运行正常了:

我们选择第二个选项,它会为我们创建一个基础模板,这里它已经帮我们做好了所有的配置,你想要扩展你想要的配置,你可以根据该脚手架中的文档进行配置。

随后跟着你的需求,一步步选择,就可以成功创建项目了

如果创建项目的过程中出现了以下提示,那么一定是你的网络出现了问题(自信点),请你重新执行以下命令即可:

最终创建的项目的目录有以下结构:

├───📁 .husky/
│   ├───📄 commit-msg
│   └───📄 pre-commit
├───📁 .storybook/
│   ├───📄 main.js
│   └───📄 preview.js
├───📁 .vscode/
│   └───📄 settings.json
├───📁 example/
│   ├───📄 App.tsx
│   ├───📄 index.html
│   ├───📄 index.tsx
│   ├───📄 package.json
│   └───📄 tsconfig.json
├───📁 src/
│   ├───📁 components/
│   │   └───...
│   └───📄 index.tsx
├───📁 stories/
│   └───📄 button.stories.tsx
├───📄 .eslintignore
├───📄 .eslintrc.json
├───📄 .gitignore
├───📄 .prettierignore
├───📄 .prettierrc.json
├───📄 babel.config.js
├───📄 commitlint.config.js
├───📄 package.json
├───📄 pnpm-lock.yaml
└───📄 tsconfig.json

既然项目已经创建完成了,那么我们就可以开心编码了 😎😎😎

如何使用

进入到创建的项目当中,我们可以使用 npm start 来监听项目的变化:

我们可以使用 npm run sb 命令启动 storybook 来测试组件并编写文档:

编码

在提供基础模板当中,我们提供了一个 Button 按钮作为示例:

那么接下来我们再来编写一个其他的组件作为测试,这里使用 styled-components 作为组件的样式,在 components 目录下新建以下文件:

在 style.ts 中编写以下代码:

import styled from "styled-components";

export const LayoutWrapper = styled.div`
  width: 100vw;
  height: 100vh;
  .head {
    width: 100%;
    height: 33.3%;
    background-color: red;
  }
  .main {
    width: 100%;
    height: 33.3%;
    background-color: green;
  }
  .footer {
    width: 100%;
    height: 33.3%;
    background-color: yellow;
  }
`;

在 index.tsx 中编写以下代码:

import React from "react";
import { LayoutWrapper } from "./style";

interface LayoutParams {
  head: React.ReactNode;
  main: React.ReactNode;
  footer: React.ReactNode;
}

const Layout = (props: LayoutParams) => {
  const { footer, main, head } = props;
  return (
    <LayoutWrapper>
      <div className="head">{head}</div>
      <div className="main">{main}</div>
      <div className="footer">{footer}</div>
    </LayoutWrapper>
  );
};

export default Layout;

到这里一个组件算是编写完成了,我们可以在入口文件 index.tsx 中引入并统一导出了:

import Layout from "./components/layout";

export { Layout };

到这里组件的代码我们已经编写完成了,我们来使用 storybook 来进行测试,在 stories 目录下创建 layout.stories.tsx 文件,并编写以下代码:

import React from "react";
import { Layout } from "../src/index";

export default {
  title: "Layout",
  component: Layout,
};

export const Primary = () => (
  <Layout
    head={<div>head</div>}
    main={<div>main</div>}
    footer={<div>footer</div>}
  />
);
export const Secondary = () => (
  <Layout head={<div>红</div>} main={<div>绿</div>} footer={<div>黄</div>} />
);

打开 storybook 提供的网站,你会发现有如下效果:

到这里的时候,我们组件也编写完成,也测试完成了,我们可以对其进行发布了。

组件发布

在组件正式发布到 npm 之前,我们先对其进行 git 提交:

然后再次基础上执行 npm run commit:

当代码提交完成之后,你可以使用以下命令来根据你的实际情况来更新你组件的版本信息:

当执行这些命令之后它会自动为你生成 CHANGELOG 文件,也就是我们常说的更新日志:

# Changelog

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## 1.1.0 (2023-06-22)

### Features

- 🚀 你害怕大雨吗 是不是还有短头发 6ce2aa9

当这些事情都完成之后,你就可以发布你的 npm 包了,但是别忘了终端执行 npm build 对你的代码进行打包哦。

发布成功,我们新建一个项目来看看效果吧!

在项目中安装该组件库是否能正常使用吧!

npm i moment-design

在项目中导入该组件并使用:

import React from "react";
import { Layout } from "moment-design";

const App = () => {
  return (
    <Layout head={<div>红</div>} main={<div>绿</div>} footer={<div>黄</div>} />
  );
};

export default App;

效果成功显示,这就说明我们的组件库编写成功了:

完全没问题,npm 上的测试完全,没有问题 💯💯💯

更多关于 create-neat 的信息,可以查看该文档 Github 地址

如果该脚手架对你有帮助,欢迎 star ⭐️⭐️⭐️