欢迎来到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.