The latest articles on DEV Community by wkylin.w (@wkylin). https://dev.to/wkylin https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F273397%2F4ccc7443-6bb0-4a4f-a6c1-a96daa597e58.png https://dev.to/wkylin en wkylin.w Sun, 13 Mar 2022 15:09:15 +0000 https://dev.to/wkylin/promotion-web-ji-yu-reactwebpackdeng-zui-xin-ji-zhu-de-kai-yuan-jiao-shou-jia-30l6 https://dev.to/wkylin/promotion-web-ji-yu-reactwebpackdeng-zui-xin-ji-zhu-de-kai-yuan-jiao-shou-jia-30l6 <h2> Promotion Web </h2> <ol> <li>基于 Antd 实现亮白及暗黑两套主题</li> <li>基于 React 最新版本，拥抱 Hooks</li> <li>基于 React Router V6, 实现嵌套路由更方便</li> <li>基于 Webpack 最新版本，实现多环境打包部署，代码分割优化，结合官方分析工具，实时优化代码</li> <li>基于 Faker 实现 Mock Server,不依赖后端实现模拟数据更加方便</li> <li>封装 Fetch, 实现 useFetch, 请求更加方便，取消请求，实现请求及响应拦截，方便数据处理及统一报错提示</li> <li>支持 TypeScript, 一切变得可控，扼杀错误于摇篮之中</li> <li>支持多页签，提升效率</li> <li>代码风格统一，项目统一配置 ESLint/Prettier/Husky/EditorConfig</li> <li>配置 Commit message， 使用标准 commit 生成 change log 标准化</li> <li>配置 Sentry，方便日志追踪，及时发现问题</li> <li>基于 React Redux Hooks, 状态管理更加方便</li> <li>实现 ErrorBoundary,方便定位问题，避免不可预知的问题导致系统崩溃</li> <li>代码分割，组件懒加载，Loading 垂直水平居中</li> <li>更多特性请 fork 项目，相信我，你会有意想不到的收获</li> </ol> <p>Github: <a href="https://github.com/wkylin/promotion-web" rel="noopener noreferrer">https://github.com/wkylin/promotion-web</a></p> <p>Demo: <a href="https://wkylin.github.io/promotion-web/" rel="noopener noreferrer">https://wkylin.github.io/promotion-web/</a></p> <p>本地启动项目：</p> <ol> <li>git clone <a href="https://github.com/wkylin/promotion-web.git" rel="noopener noreferrer">https://github.com/wkylin/promotion-web.git</a> </li> <li>cd promotion-web</li> <li>可以选择以下两种方式的任一方式启动项目, 其他 cli 参考 package.json 中的 scripts <ul> <li>npm start</li> <li>npm run dev:faker 与后端接口约定后，在没有提供接口时前端可以来模拟后端返回数据</li> <li>npm run dev:server</li> </ul> </li> </ol> <p>Give a ⭐️ if this project helped you!</p>