ToFun

欢迎来到tofun!🙃
我们是一个极简的匿名留言板应用,Material风格!🍉
你可以在留言板吐槽🍓,也可以当跨平台便签使用🥝. ⛷⛷⛷Enjoy it...

需求配置

node ^4.5.0
npm ^2.15.9

开始

确认好你的环境配置，然后就可以开始以下步骤。

$ npm install                   # 安装项目依赖
$ npm start                     # 编译和运行

开发过程中，你用得最多的会是npm start，但是这里还有很多其它的处理：

`npm run <script>`	解释
`start`	服务启动在localhost:9013，代码热替换开启。
`compile`	编译程序到dist目录下（默认目录~/dist）。
`clean`	删除dist文件夹。
`lint`	检查所有.js文件语法规范。
`build`	启动代码检查，测试，如果成功，编译到 dist 目录下。`NODE_ENV`值为"production"。
`build:dev`	与`build`相同，但是`NODE_ENV`值为"development"。
`build:test`	与`build`相同，但是`NODE_ENV`值为"test"。
`build:uat`	与`build`相同，但是`NODE_ENV`值为"uat"。
`deploy`	部署到生产环境。
`deploy:test`	部署到测试环境。
`deploy:uat`	部署到UAT环境。

依赖

dependencies:

名称	解释
`antd`	淘宝react-UI组件库。更多
`antd-mobile`	淘宝react-mobile-UI组件库。更多
`babel-loader`	Babel是编写下一代JavaScript的编译器。更多
`babel-plugin-transform-runtime`	对帮助程序和内置程序的外部引用，自动聚合到代码，而不污染全局。更多
`babel-polyfill`	babel转码规则。更多
`babel-preset-es2015`	ES2015转码规则。更多
`babel-preset-react`	react转码规则。更多
`babel-preset-stage-0`	stage-0转码规则。更多
`babel-runtime`	代码优化。更多
`better-npm-run`	可自定义您项目的 npm 脚本。更多
`cssnano`	一个模块化的压缩器，构建在PostCSS生态系统之上。更多
`debug`	node.js 下的调试器。更多
`es6-promise`	一个轻量级库，提供用于组织异步代码的工具。更多
`extract-text-webpack-plugin`	webpack解压缩用。更多
`fs-extra`	node.js 命令行扩展。更多
`html-webpack-plugin`	webpack创建HTML文件插件。更多
`isomorphic-fetch`	fetch API for node 和浏览器。更多
`ip`	IP地址实用程序。更多
`less`	动态css。更多
`lodash`	lodash库。更多
`moment`	moment库(格式化时间用)。更多
`react-spinkit`	react加载动画组件库。更多
`react`	react库。更多
`react-dom`	react-dom库。更多
`react-modules`	react-redux库。更多
`react-router`	react-router库。更多
`modules`	redux库更多
`webpack`	前端打包工具更多
`yargs`	命令行扩展更多
`rimraf`	node环境下一个深度删除文件模块更多
`***-loader`	各种加载器。更多
`postcss-pxtorem`	可以将css文件的px单位转化为rem单位的插件。更多

devDependencies:

名称	解释
`express`	node.js web服务框架。更多
`babel-core`	babel编译器。更多
`babel-eslint`	babel语法检查器。更多
`babel-plugin-istanbul`	代码测试插件。更多
`enzyme`	airbnb的React的测试库。更多
`eslint`	javascript代码规范检查。更多
`eslint-config-standard`	javascript标准配置。更多
`eslint-config-standard-react`	react标准配置。更多
`eslint-plugin-babel`	eslint规则插件。更多
`eslint-plugin-promise`	eslint规则插件。更多
`eslint-plugin-react`	eslint规则插件。更多
`eslint-plugin-standard`	eslint规则插件。更多
`connect-history-api-fallback`	利用history-api使所有的路由都直接指向index.html文件。更多
`karma`	单元测试。更多
`karma-coverage`	单元测试。更多
`karma-mocha`	单元测试。更多
`karma-mocha-reporter`	单元测试。更多
`karma-plantomjs-launcher`	单元测试。更多
`karma-webpack-with-fast-source-map`	单元测试。更多
`mocha`	单元测试。更多
`nodemon`	监控node应用的变化,重启node服务,测试环境使用。更多
`plantomjs-prebuilt`	node环境下一个无界面webkit浏览器,用于测试。更多
`react-addons-test-utils`	react测试附属组件。更多
`redbox-react`	react报红抛出错误的组件。更多
`webpack-dev-middleware`	用于开发的webpack中间件。更多
`webpack-hot-middleware`	webpack热插拔中间件。(用于开发环境)更多

项目结构

这个项目的结构使用的是 fractal(不规则碎片形：适合大型项目)，分组主要是依照特性而不是文件类型。这种结构谐在让程序更容易扩展，想了解更多请点击这里。

.
├── bin                         # 启动脚本和编译脚本
├── dist                        # 发版文件
├── build                       # shell 脚本
├── config                      # 项目配置文件
│   ├── api                     # 相关模块 Api 请求地址
│   ├── data                    # 相关配置
│   │   ├── maintain.js         # 站点维护配置
│   │   └── env.js              # Api环境配置
│   ├── lib                     # 第三方配置(包含webpack打包配置)
│   │   ├── env.config.js       # 默认环境配置
│   │   ├── webpack-complier.js # webpack编译函数
│   │   └── webpack.config.js   # webpack配置
│   └── config.js               # 相关配置处理
├── node_modules                # 项目依赖
├── server                      # Express 程序 (使用 webpack 中间件)
│   └── app.js                  # 服务端程序入口文件
├── src                         # 程序源文件
│   ├── app.js                  # 程序启动和渲染
│   ├── index.html              # web页面入口
│   ├── components              # 全局可复用的表现组件
│   ├── containers              # 全局可复用的容器组件
│   ├── modules                 # 可复用组件的reducers/actions的集合
│   ├── layouts                 # 主页结构
│   ├── assets                  # Redux指定块
│   │   ├── img                 # 静态图片资源
│   │   ├── css                 # 公共样式
│   │   └── utils               # js公共方法
│   ├── store                   # Redux指定块
│   │   ├── createStore.js      # 创建和使用redux store
│   │   ├── location.js         # location 的action 和 reducer
│   │   └── reducers.js         # Reducer注册和注入
│   └── routes                  # 主路由和异步分割点
│       ├── index.js            # react路由配置文件
│       ├── Root.js             # providers包住组件,注入store 和 routes
│       └── Home                # 不规则路由
│           ├── index.js        # 路由定义和代码异步分割
│           ├── assets          # 组件引入的静态资源
│           ├── components      # 直观React组件
│           ├── containers      # 连接actions和store
│           ├── modules         # reducers/actions的集合
│           └── routes **       # 不规则子路由(** 可选择的)
├── package.json                # 项目信息文件
└── tests                       # 单元测试

样式

所有的css和less都支持会被预处理。只要被引入，都会经过PostCSS压缩，加前缀，所有px单位都会转换成rem单位。编写css的时候,样式值都写成和视觉稿上标注的值（视觉稿标注一般以设备物理点为单位，像 iPhone6 屏幕 750 的宽度）一样即可。 index.html中会嵌入一段脚本代码,设置html的font-size根值为100px。样式表在生产环境下会提取到一个css文件下。

加载动画

加载动画引用react-spinkit。使用方法:

var Spinner = require('react-spinkit');
<Spinner spinnerName='double-bounce' />

本地调试

这个项目的服务端使用express。需要注意的是，只有一个目的那就是提供了webpack-dev-middleware 和 webpack-hot-middleware（代码热替换）。使用自定义的express程序替换webpack-dev-server，让它更容易实现universal 渲染和为了不使这个包过于庞大。

打包优化

Babel被配置babel-plugin-transform-runtime可以让代码更优化。另外，在生产环境，我们使用react-optimize来优化React代码。在生产环境下，webpack会导出一个css文件并压缩Javascript，并把js模块优化到最好的性能。

静态部署

如果你正在使用nginx处理程序，确保所有的路由都直接指向 ~/dist/index.html 文件，然后让react-router处理剩下的事。如果你不是很确定应该怎么做，文档在这里。Express在脚手架中用于扩展服务和代理API，或者其它你想要做的事，这完全取决于你。

Thanks you guys all the time.

Chaoming-L/react_ToFun