輕鬆開發React組件和造輪子指北

時間 2019-11-16

標籤輕鬆開發 react 組件輪子欄目 React 简体版

原文原文鏈接

前言

本文將給你們分享如下內容：css

輕鬆開發一個react組件
手寫一個組件模板template並藉助yeoman開發腳手架

後續將用到的源碼地址粘貼以下：前端

組件模板源碼地址：react-component-templatenode

yoeman腳手架源碼地址：generator-react-component-magicreact

輕鬆開發一個react組件

不少前端開發者在開發react組件的時候每每不知從何下手，若是你也有此困惑，那麼讀完本文確定讓你撥雲見日當即手擼一個組件出來，這裏將使用Damujiangr開發的yeoman腳手架輕鬆搭建一個react組件開發工程webpack

建議在github或gitlab上建立工程，而後clone到本地，再執行如下操做，這樣能夠保證在生成package.json時自動填充repository、bugs、homepage等git倉庫信息字段git

首先是工具安裝

[sudo] npm install -g yo                                 # yo工具安裝
[sudo] npm install -g generator-react-component-magic    # template安裝

yo react-component-magic                                 # 工程初始化
複製代碼

node.js版本建議選擇8.x，windows系統可能有webpack plugin的兼容問題github

├── doc                     // 使用文檔
├── examples                // 示例代碼
├── package.json
├── rollup.config.js
├── src                     // 源代碼
├── style                   // 源代碼樣式
└── webpack.config.js
複製代碼

src目錄結構web

├── __tests__			// 測試目錄
├── components			// 組件目錄
│   ├── Block.js		// 單一組件
│   └── __tests__		// 測試目錄
└── index.js			// 主入口
複製代碼

此結構支持單一組件的開發和導出，如圖例中的Block.js，也支持多個組件同時開發和導出，在component下建立文件夾或者新的文件便可，只要在index.js中組織export的方式便可npm

單一文件導出示例json

import Block from './components/Block';

export default Block;
複製代碼

多個組件導出示例

export { default as Block } from './components/Block';
export { default as Other } from './components/Other';
export { default as More } from './components/More';
複製代碼

代碼規範約束使用的eslint，遵循airbnb代碼規範

rollup.config.js說明

做用是導出組件的外鏈版本，供在HTML中經過srcipt:src方式引入

在配置中能夠經過修改output.name指定組件對外暴露的變量名
webpack.config.js

做用是經過npm start運行本地開發時的一些配置

在配置中能夠經過resolve.alias指定npm包名

執行npm run build會構建出組件代碼，用於上傳NPM，目錄以下，其餘style源代碼也是生產代碼

├── dist                    // 產物外鏈版本
├── esm                     // 產物ES6版本
├── lib                     // 產物ES5版本
└── style                   // 源代碼樣式
複製代碼

在package.json中已經配置好入口：

"main": "lib/index.js",		// 通常狀況下的主入口
"module": "esm/index.js"	// 提案，用於引入ES Module的入口
複製代碼

本地開發測試和測試腳本測試對組件開發來講是很是必要的，本例中能夠在example中能夠直接經過import方式引入正在開發的組件，進行本地測試在example/app.js引入組件
```
import 'react-component-template/style/component.css';// eslint-disable-line
import Block from 'react-component-template/src'; // eslint-disable-line
複製代碼
```
經過npm start命令自動打開瀏覽器並打開熱更新功能，能夠方便的進行本地開發測試

測試框架使用的是Jest,能夠在每級目錄的__test__目錄下編寫對接的測試文件，執行npm run test命令便可獲得測試結果，代碼覆蓋率報告使用的codecov, 若是你的工程上傳到github，並配置好travis CI，能夠經過codecov上傳測試報告
上傳NPM

首先要有一個npm帳號
```
npm version patch[|minor|major]		# 控制版本號
npm publish				# 發佈
複製代碼
```
到此爲止，你就能夠愉快地開發屬於你本身的react組件了，而且能夠發佈到NPM上分享給其餘人

手寫一個組件模板template並藉助yeoman開發腳手架

手寫一個組件須要注意的幾點：

最終產出代碼，最好包含lib[babel編譯後代碼]、esm[es module格式代碼]、dist[外鏈版本]三種格式，以提供多種方式供使用者引用，固然esm和dist並非必須的
- 值得注意的是，千萬不要將依賴的react庫打包進來
example要有，既能幫助本身測試，也可讓其餘人蔘考更快地進行使用
組件測試用例，推薦使用Jest，代碼覆蓋率推薦使用codecov，若是你的代碼放在Github上，最好接入Travis CI
發佈NPM包時能夠在package.json中指定files字段，其中包含的文件夾和文件將會被髮布到NPM上

yeoman腳手架

React官方腳手架是Create React App，在開發React項目的時候仍是很是推薦的，對於開發react組件，就會顯的大材小用過於複雜，並且修改webpack配置是每個FE頭痛的事情，因此我基於Yeoman手寫了一個腳手架，入門很是簡單快捷，主要編寫過程以下：

使用yeoman官方推薦的generator初始化工程目錄

[sudo] npm install -g generator-generator
yo generator
複製代碼

使用async/await結合Promise控制流程
1. 從github上下載模板react-component-template到本地的暫存目錄，藉助了download-git-repo
2. 複製須要的模板文件到工做目錄下，刪除暫存目錄
3. 結合init-package-json, 根據問答的結果merge了package.json的字段信息
4. 替換模板中特定的佔位符一個定製的完整的react組件開發工程初始化完畢
源代碼能夠參考文首提到的連接，歡迎Star、PR

react-component-template、generator-react-component-magic