React seed构建过程

React seed构建过程

写在前面

Facebook发布react之后,一直想找机会学一下,从官网到博客到问答,积累了点零散的知识,在github找了很多学习react的工程,不是项目太大就是配置太多,于是最近参考了vue-cli以及github上的一些开源项目,根据自己的喜好,包括目录结构,命名,文件存放,弄了一个react-starter

地址:https://github.com/guoxiangwen/react-starter

目录结构

react-starter

集成的东西

webpack2,react-router,less,nightwatch,jest,babel,没有集成redux因为不是所有项目都会用到它,如果你的项目要用,自行npm i就行了

开发环境

开发环境下还是用的webpack-dev-server,并没有自己像vue-cli那样自己根据express来配置.这样已经够用了,而react官网的create-react-app是把所有配置都封装在了react-scripts中.对开发者来说不是很透明,也不知道发生了什么.npm start

生产环境

生产环境大家可以自己跑一个静态server,例如:http-server,anywhere,用来访问build文件夹,项目的根目录中还准备了一个nginx.conf。用来配置nginx.大家只需要修改location的root就行了npm run build


location / {

root  G:\\workspace\\github\\react-starter\\build;

index  index.html index.htm;

try_files $uri $uri/ /index.html =404; #客户端开启html5mode

}

测试

unit测试

这里用的是react官网推荐的jestnpm run unit

e2e测试

虽然平时写e2e写得少,不过这里还是用到了nightwatch。npm run e2e

最后

大家如果有什么建议可以到issue里面提.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,323评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,132评论 25 709
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 47,052评论 6 342
  • 今天又是周四了,看了一下工作,什么也没干。就是除了聊天就是发呆吃东西。就是不想工作,不是没事干,有一大堆,关于...
    小猪天堂阅读 1,111评论 1 1
  • 我要一直活到 我能够历数前生, 你能够与我一同笑看, 所以 死与你我从不相干。 ...
    城南栗子阅读 3,638评论 0 1