react-webpack-gulp-eslint自动化结构搭建

先上github地址https://github.com/YardWill/react-webpack-gulp-eslint

首先贴上README

README.png

集成功能

• less预编译成css
• webpack打包处理jsx文件和ES6语法
• eslint作为代码规范，使用airbnb-react规范
• 所有以上功能统一使用gulp自动化工具管理，只需要一个命令执行以上所用功能。

gulp.png

webpack优化

webpack.png

用过webpack的人都应该遇到过webpack打包文件过大的问题，因为webpack会将npm里面的依赖包一起打包进入一个文件，而对于前端的规范而言，这是一种不优雅的实现，类似react和react-dom这样的公共库我们可以通过webpack提取出来。

压缩后.png

但在开发环境下就不要压缩代码了，这样做既增加到时间也减少代码的可调试性，在上线的时候才对js进行压缩。
** 对于小型项目关于js的优化已经足够 **

尾巴

开发环境已经搭建了好了，而且全部自动化实现，可以直接拿去用，也希望有读者能够一起交流学习，之后还会引入react-router构建，因为目前还没有完全实现react-router分模块的异步按需下载功能，先不贴上去。之后简书上会继续更新。