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

前言

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

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

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

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

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

輕鬆開發一個react組件

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

建議在github或gitlab上建立工程,而後clone到本地,再執行如下操做,這樣能夠保證在生成package.json時自動填充repositorybugshomepage等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[外鏈版本]三種格式,以提供多種方式供使用者引用,固然esmdist並非必須的

    • 值得注意的是,千萬不要將依賴的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-templategenerator-react-component-magic

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

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

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

相關文章
相關標籤/搜索