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

大木匠貳發表於2019-03-04
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

相關文章