本文將給你們分享如下內容:css
後續將用到的源碼地址粘貼以下:前端
組件模板源碼地址:react-component-templatenode
yoeman腳手架源碼地址:generator-react-component-magicreact
不少前端開發者在開發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上分享給其餘人
手寫一個組件須要注意的幾點:
最終產出代碼,最好包含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控制流程
react-component-template
到本地的暫存目錄,藉助了download-git-repo
init-package-json
, 根據問答的結果merge了package.json的字段信息源代碼能夠參考文首提到的連接,歡迎Star、PR
到此爲止,相信你已經能夠開發本身的react組件了,也掌握了開發組件模板的基本概念,腳手架能夠基於yeoman,也能夠本身編寫一個,一切以提高工程化程度,減小重複勞動爲目的
最後環節,給團隊打個廣告,團隊規模20+,主要負責58招聘生態的前端開發工做,各類流行技術棧等你來挑戰React、Vue、Node.js......簡歷請砸過來-->yanlongbo@58.com
斧鑿開天地 繩墨定心猿 我是前端匠人Damujiangr