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

前言

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

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

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

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

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

輕鬆開發一個react組件

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

建議在github或gitlab上建立工程，而後clone到本地，再執行如下操做，這樣能夠保證在生成package.json時自動填充repository、bugs、homepage等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的兼容問題

• 此時將在工做目錄下生成如下目錄結構

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

• src目錄結構

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

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

  單一文件導出示例

  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

到此爲止，相信你已經能夠開發本身的react組件了，也掌握了開發組件模板的基本概念，腳手架能夠基於yeoman，也能夠本身編寫一個，一切以提高工程化程度，減小重複勞動爲目的

最後環節，給團隊打個廣告，團隊規模20+，主要負責58招聘生態的前端開發工做，各類流行技術棧等你來挑戰React、Vue、Node.js......簡歷請砸過來-->yanlongbo@58.com

斧鑿開天地 繩墨定心猿 我是前端匠人Damujiangr