序言
该系列文章将跟随作者的开发进度持续更新。
预计内容如下:
构建自己的React UI组件库:
(一):从v0.0.0到 v0.0.1 (本文)
(二):构建首页
(三):文档编写
(四):擦干净细节
(五):推广、宣传、迭代
<= to be continue =
在这里可以访问到我的组件库: BB-color
以及npm地址: BB-color
约定
- 本系列文章尽可能多的涉及到每个步骤、每个文件和每个更新。
- 本系列文章中,整个项目的开始基于官方提供的
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上创建组(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。
补充知识点D:
dependencies
:开发时会使用,打包时不会移除(仅存在于打包后的包中)
devDependencies
:开发中会使用的依赖,打包时会移除
peerDependencies
:如果你使用了这个依赖(我们所编写的UI组件库),那么你也要安装peerDependencies中的依赖(react、react-dom)
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