構建本身的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…