摘要:服务端渲染的手脚架这个启动包的设计是为了让你使用一整套最新最酷的前端技术,所有都是可配置,富特性,基于已经提供代码热加载,使用预处理,单元测试,代码覆盖率报告,代码分割等等更多。
Universal React Starter Kit
服务端渲染的React手脚架
这个启动包的设计是为了让你使用一整套最新最酷的前端技术,所有都是可配置,富特性,基于webpack已经提供代码热加载,使用sass预处理css,单元测试,代码覆盖率报告,代码分割等等更多。
这个项目最主要的目的是尽可能果断的保留。目的不是要你一定按照这个结构去完成你的项目,谐在使前端开发更健壮,更简单还有最重要的是更快乐。你可以获得以下的所有特性!
最后,如果没有大家的贡献,这个项目是不可能如此健壮的,所以,谢谢大家。
觉得不错的话,请Star一下本项目,这是对作者最大的支持。
所有相关库已准备好,随时等待调用。
特性react
redux
react-router
react-router-redux
webpack
babel
koa
karma
eslint
需求配置node ^4.5.0
npm ^3.0.0
开始确认好你的环境配置,然后就可以开始以下步骤。
$ git clone https://github.com/bodyno/react-starter-kit.git $ cd react-starter-kit $ npm install # Install project dependencies $ npm start # Compile and launch
如果一切顺利,你会看到如下:
开发过程中,你用得最多的会是npm start,但是这里还有很多其它的处理:
npm run | 解释 |
---|---|
start | 服务启动在3000端口,代码热替换开启。 |
compile | 编译程序到dist目录下(默认目录~/dist)。 |
dev | 与npm start相同, 但是启动nodemon守护进程。 |
dev:no-debug | 与npm run dev 但是禁用devtool(开发工具)。 |
test | 开启Karma测试并生成覆盖率报告。 |
test:dev | 开启Karma测试并监听改变随时重新测试,但是生成覆盖率报告。 |
deploy | 启动代码检查,测试,如果成功,编译到dist目录下。 |
deploy:dev | 与deploy相同,但是NODE_ENV值为"development"。 |
deploy:prod | 与deploy相同,但是NODE_ENV值为"production"。 |
lint | 检查所有.js文件是否规范。 |
lint:fix | 检查所有.js文件是否规范并修复它们。 更多 |
这个项目的结构使用的是 fractal(不规则碎片形:适合大型项目)*,方法的分组主要是依照特性而不是文件类型。注意,这个目录结构只是一个指引,并不一定要按这个来。这种结构谐在让程序更容易扩展,想了解更多请点击这里。
. ├── bin # 启动脚本 ├── blueprints # redux-cli的蓝图 ├── build # 所有打包配置项 │ └── webpack # webpack的指定环境配置文件 ├── config # 项目配置文件 ├── server # Koa 程序 (使用 webpack 中间件) │ └── main.js # 服务端程序入口文件 ├── src # 程序源文件 │ ├── main.js # 程序启动和渲染 │ ├── components # 全局可复用的表现组件(Presentational Components) │ ├── containers # 全局可复用的容器组件 │ ├── layouts # 主页结构 │ ├── static # 静态文件(不要到处imported源文件) │ ├── styles # 程序样式 │ ├── store # Redux指定块 │ │ ├── createStore.js # 创建和使用redux store │ │ └── reducers.js # Reducer注册和注入 │ └── routes # 主路由和异步分割点 │ ├── index.js # 用store启动主程序路由 │ ├── Root.js # 为上下文providers包住组件 │ └── Home # 不规则路由 │ ├── index.js # 路由定义和代码异步分割 │ ├── assets # 组件引入的静态资源 │ ├── components # 直观React组件 │ ├── container # 连接actions和store │ ├── modules # reducers/constants/actions的集合 │ └── routes ** # 不规则子路由(** 可选择的) └── tests # 单元测试样式
所有的css和sass都支持会被预处理。只要被引入,都会经过PostCSS压缩,加前缀。在生产环境下会提取到一个css文件下。
服务端这个项目的服务端使用Koa。需要注意的是,只有一个目的那就是提供了webpack-dev-middleware 和 webpack-hot-middleware(代码热替换)。使用自定义的Koa程序替换webpack-dev-server,让它更容易实现universal 渲染和为了不使这个包过于庞大。
打包优化Babel被配置babel-plugin-transform-runtime可以让代码更优化。另外,在生产环境,我们使用react-optimize来优化React代码。
在生产环境下,webpack会导出一个css文件并压缩Javascript,并把js模块优化到最好的性能。
静态部署如果你正在使用nginx处理程序,确保所有的路由都直接指向 ~/dist/index.html 文件,然后让react-router处理剩下的事。如果你不是很确定应该怎么做,文档在这里。Express在脚手架中用于扩展服务和代理API,或者其它你想要做的事,这完全取决于你。
谢谢大家如果没有大家的贡献,这个项目是不可能诞生的, 感谢所有为这个项目做出贡献的人。
链接在这里
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50174.html
摘要:服务端渲染的手脚架这个启动包的设计是为了让你使用一整套最新最酷的前端技术,所有都是可配置,富特性,基于已经提供代码热加载,使用预处理,单元测试,代码覆盖率报告,代码分割等等更多。 Universal React Starter Kit 服务端渲染的React手脚架 这个启动包的设计是为了让你使用一整套最新最酷的前端技术,所有都是可配置,富特性,基于webpack已经提供代码热加载,使用...
摘要:服务端渲染的手脚架这个启动包的设计是为了让你使用一整套最新最酷的前端技术,所有都是可配置,富特性,基于已经提供代码热加载,使用预处理,单元测试,代码覆盖率报告,代码分割等等更多。 Universal React Starter Kit 服务端渲染的React手脚架 这个启动包的设计是为了让你使用一整套最新最酷的前端技术,所有都是可配置,富特性,基于webpack已经提供代码热加载,使用...
摘要:通过声明式编程模型定义组件,是最强大的核心功能。无论是的浏览器书签,还是的导航功能,只要是可以使用的地方,就可以使用。二级路由使用渲染组件属性状态请选择一个主题。也许是最佳小实践地址,觉得有帮助的话,请点击一下,嘿嘿 小前言 这是一个小小的有关react的小例子,希望通过一个小例子,可以让新手更好的了解到react、react-router4.0、redux的集中使用方法。 这是基...
阅读 1418·2021-09-22 15:52
阅读 1458·2019-08-30 15:44
阅读 895·2019-08-30 14:24
阅读 2705·2019-08-30 13:06
阅读 2700·2019-08-26 13:45
阅读 2782·2019-08-26 13:43
阅读 1014·2019-08-26 12:01
阅读 1436·2019-08-26 11:56