本文由平头哥联盟-首席填坑官∙苏南分享
大家好，这里是平头哥联盟，我是`首席填坑官`——苏南，今天要给大家分享的是公司react项目的脚手架,这篇博客原本是从17年初写的，一直没有在简书发布，希望今天不会太晚，望各位老司机勿喷！
最近看到很多react相关的问题跟讨论，越来越多的小伙伴喜欢这个框架了， 同时也在看到了有些入门的小伙伴遇到了各种各样的问题，本人也是react框架使用都一枚， 目前就职于由腾讯、阿里、平安三巨头合资的一家互联网金融公司深圳分公司，分别上海、深圳、杭州、北京、广州等多个分部，前端人员也有近100人， 框架也在统一往react靠齐，本人也在实际项目中应用了蛮长一段时间，跟社区的很多新伙伴一样，入坑的过程中，遇到过各种各样的问题，总之一句话，路是自己选的，再苦也要坚持走下去，相信未来会更好， 就不在这里一一吐槽了，再吐下去，你们估计要骂我疯了，回归正题重点就讲讲我们项目的一些整个框架结构吧，
因为很多小伙伴在入门后，上手做项目时，都会苦脑于项目结构如何构建，便于后期维护、项目迭代等等的问题，当然也有很多小伙伴直接选择了create-react-app,但俗话说 ："金窝银窝不如自己的狗窝",东西再好也没自己新手搭建的好：
地址：[github项目示例地址] ，如果觉得不错，对你有帮助记得帮 转发 和 star哦，感谢您的支持。
项目结构示例：
可以扫码预览哦
上面是项目的大体结构及项目模块的代码管理，有兴趣的小伙伴，可以进入项目详细看看，下面重点列出一些细节特性：
1、首先我们会分不同的环境，写不同的配置文件，便于结构清晰，维护修改；
2、所有的项目组件都放在pages里，pages里再按项目模块去划分项目结构，actions、reducers内也是如何，共用的组件放在components内，
3、路由文件也是按项目模块来划分，不要全部放在一个文件内，找起来特别不方便，也不容易维护，
4、后面统一引入在一个入口文件内，对外输出，
5、实现了按需加载，共用代码提取，
6、该项目主要用到了react、react-router、redux、redux-thunk、es6、babel、webpack、node、express、fetch等
7、特别说明，window.devToolsExtension是redux的一个调试工具，在chrome浏览器应用商店搜索redux后按装，开发环境就能看到redux状态的每一步变化了，便于调试提高开发效率;
8、当然还有其他的，就不一一说明了，可进入项目细看，
本文由平头哥联盟-首席填坑官∙苏南分享
地址：github项目示例地址 ，如果觉得不错，对你有帮助记得帮 转发 和 star哦，感谢您的支持。
今天的分享就到这里，如果文章中有不对之处，烦请各位大神斧正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)
想更详细的了解我？还有更多疑惑？请猛戳这里吧，来与我一起交流吧。
作者：苏南 - 首席填坑官
来源：平头哥联盟
交流群：386485473(前端) 、260282062(测试)
本文原创，著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论