構建自己的React UI元件庫: 從v0.0.0到 v0.0.1

ParaSLee發表於2018-12-30
ReactUI元件

序言

該系列文章將跟隨作者的開發進度持續更新。

預計內容如下：

構建自己的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)，可以在頁面的右上角看見下圖的內容

構建自己的React UI元件庫: 從v0.0.0到 v0.0.1

注1：

我們可以建立自己的個人倉庫(repository)，也可以通過建立組(organization)->組中建立倉庫(repository)

組會有一個單獨的檔案庫，你能和你的成員共同開發，並且在一個組裡能包含多個與該組有關的程式碼。比如ant-design也是所屬Ant Design Team這個組，而Ant Design Team這個組裡包含了多個圍繞ant-design建立的其他專案。

考慮到日後的擴充套件，建立一個UI元件庫，我個人更推薦建立組，然後在組中建立倉庫。 當然，你也可以憑自己喜好建立


點選New organization -->

填寫與組有關的內容（這部分可以隨意填寫或選擇，對之後我們構建UI元件庫沒有影響）-->

在組裡建立倉庫


在建立倉庫時要注意一點，下圖抹茶色框裡，開源協議，選擇MIT協議。紅框裡面無所謂選擇，如果選擇了None後續需要自己配置

構建自己的React UI元件庫: 從v0.0.0到 v0.0.1

與協議相關的知識不在本文範圍內，感興趣的同學可以自己百度

千里之行始於足下，很棒！第一步準備已經完成。


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
複製程式碼

構建自己的React UI元件庫: 從v0.0.0到 v0.0.1

當構建完成之後，我們能在test資料夾裡發現一個新檔案: my-app

使用編譯器開啟my-app，你能看見如下圖所示的內容。

構建自己的React UI元件庫: 從v0.0.0到 v0.0.1

這是我們通過create-react-app構建生成的檔案目錄。（檔案目錄結構會在檔案重構後解釋，位於 【前期準備-3.目錄重構】）


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

注3：

執行 npm run eject 不是必要的，但對以後我們做自定義處理有幫助。

如果你只想使用React的預設配置，或者只是想做一個簡單的庫，那麼可以跳到 前期準備 - 3.目錄重構


使用git bash , 進入my-app檔案後執行npm run eject

構建自己的React UI元件庫: 從v0.0.0到 v0.0.1

補充知識點A：

在預設情況下，我們是使用 react-scripts 打包執行我們的程式碼，在配置方面的問題我們不需要去考慮，這樣的操作能讓我們專注於程式碼的編寫。但是如果有更多的需求，需要自己配置相應的功能，那麼使用React提供的 react-scripts eject 能讓我們接管所有的配置項。但是要注意，這是不可逆操作。


在執行完操作後，你能發現你的檔案目錄變成了這樣

構建自己的React UI元件庫: 從v0.0.0到 v0.0.1


3. 目錄重構

現在我們要刪除我們用不上的檔案，新增我們需要的資料夾。具體的刪除和保留，可以檢視下圖。

下圖中，左為重構前，右為重構後

構建自己的React UI元件庫: 從v0.0.0到 v0.0.1

如果你沒有執行 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

構建自己的React UI元件庫: 從v0.0.0到 v0.0.1

如果能正常顯示，那麼我們元件就做好了。


單獨編譯出元件模組

1. 依賴安裝

在此之前，我們需要安裝以下依賴，

npm install --save-dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react cpx cross-env
複製程式碼

每個依賴的作用可以自行百度。以後會在文中補上（咕咕咕）

構建自己的React UI元件庫: 從v0.0.0到 v0.0.1

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
複製程式碼

構建自己的React UI元件庫: 從v0.0.0到 v0.0.1

如果成功生成了如上的檔案，恭喜你，距離成功只剩一步了。


令人激動的釋出

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) 下來

構建自己的React UI元件庫: 從v0.0.0到 v0.0.1

隨後轉移檔案，將我們本地的檔案轉移至我們的克隆下來的檔案裡。


提交程式碼。

首先執行

# 這裡的作用在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…

相關文章