手動搭建react webapp腳手架，快速開發武漢疫情h5頁面

前言

因爲這次疫情影響，只能呆在家中，最近在掘金看見好多疫情h5項目，例如山月大佬的《武漢肺炎疫情實時動態省市地圖開發》，恰好最近有點時間，就用本身以前搭建好的的react移動端框架，快速搭建開發了一套h5頁面，分享給你們。

頁面展現

項目地址及項目預覽

• 項目地址查看源代碼
• 預覽地址預覽
• 二維碼

項目介紹

項目集成了react全家桶，集成移動端開發適配，例如1px問題，rem適配，px轉rem，圖片根據dpr加載相應像素的圖片；支持組件異步加載等，拿來便可開發使用。腳手架實現完整功能以下：

• react組件異步加載，提供兩種方案，一種是es6的import，封裝成高階組件，另外一種是經過react-loadable

//經過高階組件異步加載組件
export default function asyncComponent({loader}){
   class AsyncComponent extends Component {
       constructor(props){
           super(props);
           this.state = {
               component: null
           }
       }
       componentDidMount() {
           //執行外部promise
           loader().then(res=>{
               this.setState({
                   component: res.default
               })
           })
       }
       render(){
           const C = this.state.component
           return C ? <C {...this.props}/> : null;
       }
   }
   return AsyncComponent;
}
複製代碼

• webpack熱更新
• reducer熱更新

if (module.hot) {
    module.hot.accept('./reducer/main', ()=>{
        const nextRootReducer = require('./reducer/main.js').default;
        store.replaceReducer(nextRootReducer)
    });
}
複製代碼

• 本身手動封裝的react-redux，點擊查看代碼
• webpack代碼分割
• 封裝fetch請求 點擊查看代碼
• babel,eslint，postcss-px-to-viewport配置
• 多入口打包

//多入口
function getEntry() {
	let entryMap = {};
	fs.readdirSync(pageDir).forEach((pathname) => {
		let fullPathName = path.resolve(pageDir, pathname);
		let stat = fs.statSync(fullPathName);
		let fileName = path.resolve(fullPathName, mainFile);

		//判斷是文件而且入口文件存在
		if (stat.isDirectory() && fs.existsSync(fileName)) {
			entryMap[pathname] = fileName;
		}
	});
	return entryMap;
}
複製代碼

• 集成react-router-dom,redux,react-redux,react-thunk,axios
• 解決1像素問題，rem適配，圖片適配不一樣dpr設備
• 部署打包，採用gh-pages，使用npm run deploy自動發佈git pages
• 代碼在倉庫中，若有須要可點擊查看代碼

疫情h5程序

1. 疫情h5程序是採用該腳手架快速搭建的h5頁面，數據來源於丁香園，暫時使用抓取來的json數據，存放在本地data文件中。
2. 我又在cloudflare中提供了數據接口（相似於serverless），可實時調用獲取數據

• 接口地址：data-ncov.webfamily.workers.dev/
• js腳本文件：點擊查看代碼

快速開始

# 安裝依賴
npm install

# 開發
npm run dev
# 打包發版
npm run deploy
複製代碼

deer-ui組件庫

本身年前又寫了一個react組件庫deer-ui，項目包括腳手架的搭建，stylelint,eslint,commitlint以及自動打包發版，組件實現了按需加載，主題定製等功能。基本和react無縫銜接，前期初版的基礎組件已經開發完畢，歡迎拍磚建議...

組件庫代碼地址

組件庫預覽地址