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

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…