手动搭建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无缝衔接，前期初版的基础组件已经开发完毕，欢迎拍砖建议...

组件库代码地址

组件库预览地址