从0搭建UI组件库前言造轮子这个事是老生常谈的话题。现在市面上已经有了很多优秀的UI组件库，虽然大家对于重复造轮子这件

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」

前言

造轮子这个事是老生常谈的话题。现在市面上已经有了很多优秀的UI组件库，虽然大家对于重复造轮子这件事情都是嗤之以鼻，都是拒绝重复造轮子。但是对我一个前端程序员本身来讲，会使用和会造是两个概念，你可以不重复造轮子，但是你一定要会造轮子。今天就写一篇UI组件库基础入门篇。主要是内容包含：

从0搭建流程
如何本地调试
发布npm

源码参考

地址：github.com/xiumubai/xm…

使用的打包工具为rollup

项目初始化

打开命令行工具，我使用的是iTerm，这一个自己的工作目录，创建一个文件夹，

mkdir xmb-ui-master

然后进入这个文件夹

cd xmb-ui-master

备注: 这里的文件夹名字可以根据自己的喜好随便取，跟后面你的UI组件库名，即package.json文件中的name，保持一致即可。

项目初始化

npm init -y

都是采用默认。一路回车即可。

安装依赖

我们这里所有的依赖包管理工具统一都使用yarn。

yarn add rollup @babel/core @babel/preset-env @babel/preset-react @rollup/plugin-babel

配置`rollup.config.js`

这里简单配置一下input，output，plugins，external。

import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: './lib/bundle.js',
    format: 'umd',
  },
  plugins: [babel()],
  external: ['react'],
};

然后我们可以看出，我们的入口文件是在index.js，所以下面添加一个入口文件。

配置`.babelrc`

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
  ]
}

添加入口文件`index.js`

在文件根目录下创建src目录，然后在src下面添加index.js文件。

mkdir src && cd src touch index.js

在index.js中随便添加东西

export const a = 'this is ui test';

配置打包入口和命令

打包之后，供用户使用的时候，需要在packgae.json的main字段中去链接我们写的组件库，所以我们的main字段这样写：

{
    "main": "lib/bundle.js",
}

然后添加一个打包命令：

{
    "scripts": {
        "start": "yarn run rollup -c -w",
        "build": "yarn run rollup -c"
    },
}

接下里运行yarn build

在根目录下面多了一个lib/bundle.js文件，这个就是打包以后的组件库源文件，供用户使用的。

上面的所有的环境都已经配置完毕，下面我们开发一个Switch组件。

Switch组件开发

在src下面创建一个Components/Switch文件夹，然后创建一个index.js文件。

在src/index.js下面引入：

export { default as Switch } from './Components/Switch/index';

这样在使用组件库的时候可以这样这用：

import { Switch } from 'xmb-ui-master';

在Components/Switch/index.js中添加内容：

import React, { useState } from 'react';
/** @jsx jsx */
import { css, jsx } from '@emotion/react';

export default Switch = () => {
  const [state, setState] = useState(false);
  const handleOnTap = () => {
    setState(!state);
  };
  return (
    <div
      className='container'
      css={css`
        width: 100px;
        height: 50px;
        background: red;
        border-radius: 50px;
        position: relative;
      `}
      onClick={handleOnTap}
    >
      <div
        className='ball'
        css={css`
          width: 50px;
          height: 50px;
          background: green;
          border-radius: 50%;
          position: absolute;
          left: ${state ? 'unset' : 0};
          right: ${state ? 0 : 'unset'};
          transition: all ease 1s;
        `}
      ></div>
    </div>
  );
};

这里简单的添加了一个Switch开关的功能。

备注：这里需要安装一下依赖 yarn add @emotion/core @emotion/react @emotion/babel-preset-css-prop @emotion/css

npm link

现在我们来测试一下我们的组件库能不能用。

在根组件库下运行命令：npm link，看到下面提示就成功了：

success Registered "xmb-ui-master".
info You can now run `yarn link "xmb-ui-master"` in the projects where you want to use this package and it will be used instead.

然后随便创建cra项目文件，在根目录运行命令：npm link "xmb-ui-master"，这样就把你开发的包跟你的项目中间建立了一个软链接，就跟正常使用npm包一样。

直接引入使用：

import { Switch } from 'xmb-ui-master';

这样就可以一边开发，一边实时预览组件的效果。

npm unlink

在开发结束的时候，需要手动npm unlink一下。

发布到npm

在根目录下面创建.npmignore文件

src

这样就可以在发布的时候忽略掉src文件。

最后npm publish

缺点

目前这样开发组件库，第一个，对于开发者来说特别不友好，不能在一个项目中直接预览效果，必须用另一个项目，使用npm link，不好写UI文档，下期我们使用dumi来搭建一个更加完美的组件库。

下期预告

使用dumi搭建UI组件库

系列文章

从0搭建cli脚手架

常用UI组件库友情推荐

我是朽木白，一个热爱分享的程序猿。如果觉得本文还不错，记得三连+关注，说不定哪天就用得上！您的鼓励是我坚持下去的最大动力❤️。

从0搭建UI组件库

前言