构建本身的React UI组件库: 从v0.0.0到 v0.0.1

序言

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

预计内容以下：

---

构建本身的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.im/post/5c28bb…