构建自己的React UI组件库: 从v0.0.0到 v0.0.1

ParaSLee
6,447 阅读10分钟

序言

该系列文章将跟随作者的开发进度持续更新。

预计内容如下：

构建自己的React UI组件库：

（一）：从v0.0.0到 v0.0.1 （本文）

（二）：构建首页

（三）：文档编写

（四）：擦干净细节

（五）：推广、宣传、迭代

<= to be continue =

在这里可以访问到我的组件库： BB-color

以及npm地址: BB-color


约定

  1. 本系列文章尽可能多的涉及到每个步骤、每个文件和每个更新。
  2. 本系列文章中，整个项目的开始基于官方提供的 creat-react-app 进行react构建，所有内容将使用最新的库版本进行开发。
    • create-react-app v2.1.1
    • react v16.7.0
    • webpack v4.19.1
    • babel 7+

必备知识

  • 基本掌握 React
  • 会使用 Git
  • JavaScript、CSS等基础知识

正文开始

背景故事

也许是在一次突发奇想，想着创建一个自己的，针对react的，ui组件库。期间也百度过很多内容，不过都不太如人意，之后又用谷歌搜索了相关的内容，搜到了很多，但其中总缺少一些关键的环节。我试着参考ant-design，却发现里面的内容过于庞大。 总之摸爬滚打了很久，终于成功的构建了一个属于自己的UI组件库。

那么作为本系列的第一章，会讲述如何从一个空白页开始，搭建出一个能通过npm下载，引入react使用的UI组件


前期准备

1. github与npm

首先我们要有github与npm的账号，没有账号的同学请自行申请

github官网

npm官网

下一步，在github上创建组(organization)，可以在页面的右上角看见下图的内容

注1：

我们可以创建自己的个人仓库(repository)，也可以通过创建组(organization)->组中创建仓库(repository)

组会有一个单独的文件库，你能和你的成员共同开发，并且在一个组里能包含多个与该组有关的代码。比如ant-design也是所属Ant Design Team这个组，而Ant Design Team这个组里包含了多个围绕ant-design创建的其他项目。

考虑到日后的扩展，创建一个UI组件库，我个人更推荐创建组，然后在组中创建仓库。 当然，你也可以凭自己喜好创建


点击New organization -->

填写与组有关的内容（这部分可以随意填写或选择，对之后我们构建UI组件库没有影响）-->

在组里创建仓库


在创建仓库时要注意一点，下图抹茶色框里，开源协议，选择MIT协议。红框里面无所谓选择，如果选择了None后续需要自己配置

与协议相关的知识不在本文范围内，感兴趣的同学可以自己百度

千里之行始于足下，很棒！第一步准备已经完成。


2. 构建代码

注2：

如果是windows电脑，可以使用 git bash，他能让你更加顺手。当然，如果你愿意，使用系统自带的命令行工具也是可以的。


首先，我们创建一个空白文件夹以存放我们的本地代码。

我是在 e盘的workspace文件夹里创建了一个空文件：test

之后在gitbash中进入到该文件，并使用 create-react-app 构建我们的代码。

# 可以通过运行以下代码全局安装 create-react-app
npm i create-react-app -g

# 运行以下代码进行构建
create-react-app my-app

当构建完成之后，我们能在test文件夹里发现一个新文件: my-app

使用编译器打开my-app，你能看见如下图所示的内容。

这是我们通过create-react-app构建生成的文件目录。（文件目录结构会在文件重构后解释，位于 【前期准备-3.目录重构】）


*2.1. 执行 npm run eject (非必要)

注3：

执行 npm run eject 不是必要的，但对以后我们做自定义处理有帮助。

如果你只想使用React的默认配置，或者只是想做一个简单的库，那么可以跳到 前期准备 - 3.目录重构


使用git bash , 进入my-app文件后执行npm run eject

补充知识点A：

在默认情况下，我们是使用 react-scripts 打包执行我们的代码，在配置方面的问题我们不需要去考虑，这样的操作能让我们专注于代码的编写。但是如果有更多的需求，需要自己配置相应的功能，那么使用React提供的 react-scripts eject 能让我们接管所有的配置项。但是要注意，这是不可逆操作。


在执行完操作后，你能发现你的文件目录变成了这样


3. 目录重构

现在我们要删除我们用不上的文件，添加我们需要的文件夹。具体的删除和保留，可以查看下图。

下图中，左为重构前，右为重构后

如果你没有执行 npm run eject ，那么请参考上图中重构后的部分，修改 ./public与 ./src 中的文件。


OK，现在准备工作已经全部完成。

下面开始编写我们的代码吧。


代码编写

1.修改代码：

// src/App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        hello
      </div>
    );
  }
}

export default App;


// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

2. 组件编写

创建 src/components/button 文件夹，随后创建相应文件编写Button组件

// src/components/index.js

export { default as Button } from './button';

// src/components/button/index.js

import React from 'react';
import PropTypes from 'prop-types';
import './index.css';

const Button = ({ text }) => <button className="btn">这是一个组件按钮{text}</button>

Button.propTypes = {
  text: PropTypes.any
};

export default Button;


// src/components/button/index.css

.btn {
  height: 50px;
}

3. 查看效果

完成组件编写后，修改我们的App.js

// src/App.js

import React, { Component } from 'react';
import { Button } from './components';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button text={'hhhasdasdh'}></Button>
      </div>
    );
  }
}

export default App;

完成以上步骤后，我们的组件就编写完成，现在让我们来看看效果

使用git bash，执行 npm start

如果能正常显示，那么我们组件就做好了。


单独编译出组件模块

1. 依赖安装

在此之前，我们需要安装以下依赖，

npm install --save-dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react cpx cross-env

每个依赖的作用可以自行百度。以后会在文中补上（咕咕咕）

2. 代码编写

在根目录创建 .babelrc.js 文件

// .babelrc.js

'use strict';

const output = process.env.BABEL_OUTPUT;
const modules = output == null ? false : output;

const options = {
  presets: [
    ['@babel/env', { loose: true, modules }], '@babel/react'
  ],
  plugins: [
    '@babel/proposal-object-rest-spread', ['@babel/proposal-class-properties', { loose: true }]
  ],
};

module.exports = options;

修改package.json

// package.json
{
...

"scripts": {
    ... 
    // build:commonjs 为构建commonJS版
    "build:commonjs": "cross-env BABEL_OUTPUT=commonjs babel src/components --out-dir lib/ --ignore **/__tests__,**/__mocks__",
        
    // build:esm 为构建es module版
    "build:esm": "babel src/components --out-dir esm/ --ignore **/__tests__,**/__mocks__",
        
    // 下面2行为机构化复制css文件，因为我们使用原生css，直接复制即可
    "copy-css:esm": "cpx \"src/components/**/*.css\" esm",
    "copy-css:lib": "cpx \"src/components/**/*.css\" lib"
  },

...
}

执行

npm run build:commonjs
npm run build:esm
npm run copy-css:lib
npm run copy-css:esm

如果成功生成了如上的文件，恭喜你，距离成功只剩一步了。


令人激动的发布

1. 修改配置

在发布之前，我们还要做最后一步处理，修改一些必要的配置属性

// .gitignore

...

// 不要将我们编译出的文件提交到Git
/esm
/lib

...

// package.json

{
  // name为我们的项目名，在发布到npm时，项目名由此项决定 ！！
  "name": "my-ui-components",
  // version为项目版本号，在发布到npm时，版本号由此项决定 ！！
  "version": "0.0.1",
  // 描述
  "description": "A Design UI library for React",
  // 默认入口文件，当你作为组件引用时，会以此作为默认文件引入
  "main": "lib/index.js",
  // 同为入口文件，区别可以参考后文的知识点C
  "module": "esm/index.js",
  // 作者，这里写你自己的github名就好
  "author": "ParaSLee",
  // 证书
  "license": "MIT",
  // 你的git仓库
  "repository": {
    "type": "git",
    // 后面的AAA填写你创建组名,BBB为组里项目的名字，如果你没有创建组，那么可以去掉AAA
    "url": "git+https://github.com/AAA/BBB.git"
  },
  "bugs": {
    // 后面的AAA填写你创建组名,BBB为组里项目的名字，如果你没有创建组，那么可以去掉AAA，填写完成后可以复制链接到URL中检验能不能访问，能访问并且正确那么没问题
    "url": "https://github.com/AAA/BBB/issues"
  },
  // 发布到npm的文件
  "files": [
    "esm",
    "lib"
  ],
  // githubreadme页，也是在npm上访问npm包时的主页
  "homepage": "https://github.com/AAA/BBB#readme",
  // 搜索关键字
  "keywords": [
    "AAA",
    "BBB",
    "react",
    "react-component",
    "component",
    "components",
    "ui",
    "framework",
    "frontend"
  ],
  
  ...
  // 该内容可以在知识点D中查看
  "peerDependencies": {
    "react": ">=16.0.0",
    "react-dom": ">=16.0.0"
  },
      
  ...
  
}

补充知识点B：

版本号分三级，分别为：

  • 一级，全新版本
  • 二级，大改进
  • 三级，小升级或者 bug 修复

为何从 0.0.1 开始？因为 0.x.x 可以认为是非正式版本、测试版，而从 1.x.x 开始，就是正式发布的版本了。

补充知识点C：

最早的 npm 包都是基于 CommonJS 规范，当 require('package1') 的时候，就会根据 main 字段去查找入口文件。而 CommonJS 规范的包都是以 main 字段表示入口文件了，如果使用 ES Module 的也用 main 字段则会造成困扰，于是 rollup 便使用了另一个字段：module。

引用：segmentfault.com/a/119000001…

补充知识点D：

dependencies：开发时会使用，打包时不会移除（仅存在于打包后的包中）

devDependencies：开发中会使用的依赖，打包时会移除

peerDependencies：如果你使用了这个依赖（我们所编写的UI组件库），那么你也要安装peerDependencies中的依赖（react、react-dom）

引用：www.cnblogs.com/wonyun/p/96…


2. 发布到github

我们在之前的步骤中，都是在本地进行开发，现在我们将我们的源码发布到github上。

注4：

在发布之前还有一个重要的操作，首先在github和npm上搜索你的项目名，要确保一定不能有重名！！！

my-app和my-app01 是不算重名的，

如果发生了重名，记得修改你github的项目名和package.json中的name名，两者尽量保持一致性！！


首先，使用git将代码拉取下来。

进入我们之前创建的代码库，将代码克隆(clone) 下来

随后转移文件，将我们本地的文件转移至我们的克隆下来的文件里。


提交代码。

首先执行

# 这里的作用在release中添加相应的版本
git tag -a 'v0.0.1' -m 'first commit'
git push origin v0.0.1

之后，正常提交代码到github

git add .
git commit -m 'first comit'
git push -u origin master

3. 发布到npm

下一步，发布我们的代码到npm

在保证已经登录自己的npm账号后

npm login #登录
npm publish

# 输出以下信息说明发布成功, xxxxx为你的项目名称
# + xxxxx@0.0.1

到了庆祝的时候了，你已经完成了自己的UI组件库，并且能直接通过 npm install xxxx 进行安装。


使用

你可以重新开一个react项目，执行npm install

// 引入按钮组件
import { Button } from "xxxx";

为自己的成功感到骄傲吧！



尾声

这是一篇长达3300字的文章，在工作之余写这篇文章也花费了我相当长得时间。

在下一期文章中，我会以这篇文章的结尾作为起点，进行下一步的开发。

文章不久就会发布，内容为构建我们自己的官方网站


如果有任何不当或缺失的地方，希望能在评论区指出，理性交流。

如需转载请注明作者与原文地址

作者：ParaSLee

原文：juejin.cn/post/684490…

avatar
文章
阅读
粉丝