一个 React & Redux的目录树

|-----------------------------------------|
|                                         |
|            React & Redux                |
|                                         |
|-----------------------------------------|

Project
  |
  |-- node_modules
  |       |
  |       |-- react
  |       |
  |       |-- react-dom
  |       |
  |       |-- react-router
  |       |
  |       |-- react-redux => redux本身只能处理同步的Action
  |       |
  |       |-- react-thunk => 在我们没有加上thunk这个中间件之前，
  |       |                  store的dispatch方法只能传入一个action对象，
  |       |                  thunk的作用就是能够让我们可以将一个function方法传入diptach，
  |       |                  这在做异步的时候非常有用。
  |       |
  |       |-- redux-promise => redux-promise支持将promise对象作为参数传入dispatch中。
  |       |
  |       |-- prop-types => React.PropTypes 自 React v15.5 起已弃用。
  |       |                 请使用 prop-types 库代替。调用方法：
  |       |                 import PropTypes from 'prop-types'
  |       |
  |       |-- @types/react => implements method in React.Component,解决
  |       |                   Cannot resolve symbol 'Component' 的问题
  |       |
  |       |-- postcss-loader => PostCSS，一款通过 JS 插件转换 styles 样式的工具。
  |       |                     根目录下新建postcss.config.js文件。配置如下：
  |       |                     module.exports = {
  |       |                         parser: 'sugarss',
  |       |                         plugins: {
  |       |                            'postcss-import': {},
  |       |                            'postcss-cssnext': {},
  |       |                            'cssnano': {}
  |       |                         }
  |       |                     }
  |       |                     webpack配置：{
  |       |                                   test: /\.css$/,
  |       |                                   use: ['style-loader', 'css-loader','postcss-loader']
  |       |                                 }
  |       |
  |       |-- Autoprefixer => PostCSS插件，一个后处理程序。解析CSS并添加浏览器前缀。
  |       |                     postcss.config.js文件中配置如下：
  |       |                     module.exports = {
  |       |                         plugins: [
  |       |                            require('autoprefixer')({})
  |       |                         ]
  |       |                     }
  |       |
  |       |-- extract-text-webpack-plugin => 将css单独打包成一个文件。
  |       |                                  它会将所有的入口 chunk(entry chunks)中引用的 *.css，
  |       |                                  移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到JS bundle中，
  |       |                                  而是会放到一个单独的 CSS 文件（即 styles.css）当中。
  |       |                                  如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle
  |       |                                  会跟 JS bundle 并行加载。
  |       |
  |       |-- optimize-css-assets-webpack-plugin => 压缩抽离后的css代码,
  |       |                                         plugins: [new OptimizeCssAssetsPlugin()]
  |       |
  |       |-- html-webpack-plugin => 该插件将为您生成一个HTML5文件，
  |       |                          其中包括使用script标签的body中的所有webpack包。
  |       |
  |       |-- copy-webpack-plugin => 在webpack中拷贝文件和文件夹。例如：
  |       |                          new CopyWebpackPlugin([
  |       |                           {from: "./src/static/images", to: 'images/'}
  |       |                          ])
  |       |                          作用就是将 ./src/static/images
  |       |                          目录下的图片拷到编译目录到 images 文件夹下面
  |       |
  |       |-- rimraf => 编译前清空dist目录。package.json配置：
  |       |             "scripts": {"build": "rimraf dist && ..."}
  |       |
  |       |-- OpenBrowserPlugin => webpack编译后自动打开浏览器
  |       |
  |       |-- axios => 一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
  |       |
  |       |-- babel-eslint => 一个Babel parser的包装器，这个包装器使得Babel parser可以和ESLint协调工作
  |       |                   .eslintrc.js中配置："parser": "babel-eslint",
  |       |                                      "parserOptions": {
  |       |                                          "sourceType": "module",
  |       |                                          "allowImportExportEverywhere": false,
  |       |                                          "codeFrame": false
  |       |                                      }
  |       |
  |       |-- webpack
  |       |
  |       |-- webpack-dev-middleware
  |       |
  |       |-- webpack-hot-middleware
  |
  |-- dist => 打包输出文件目录
  |
  |-- src
  |    |
  |    |-- actions => Action是把数据从应用传到 store 的有效载荷。
  |    |              它是 store 数据的唯一来源，一般通过
  |    |              store.dispatch() 将 action 传到 store。
  |    |
  |    |-- reducers => Action只是描述了有事情发生了这一事实，
  |    |               并没有指明应用如何更新 state。
  |    |               reducer 用来做更新state这个动作。
  |    |
  |    |-- store  =>  1.维持应用的state；
  |    |              2.提供 getState() 方法获取 state；
  |    |              3.提供 dispatch(action) 方法更新state；
  |    |              4.通过 subscribe(listener) 注册监听器；
  |    |              5.通过 subscribe(listener) 返回的函数注销监听器。
  |    |
  |    |-- components => 展示型组件目录
  |    |
  |    |-- containers => 容器型组件目录
  |    |
  |    |-- config => 配置actionType、接口
  |    |
  |    |-- library => 插件库
  |    |
  |    |-- service => 服务配置
  |    |
  |    |-- static => 静态文件目录
  |    |
  |    |-- main.js => 入口文件
  |
  |-- webpack => webpack配置目录
  |
  |-- .babelrc => Bable的配置文件，用来设置转码规则和插件。
  |               Babel是一个广泛使用的ES6转码器，
  |               可以将ES6代码转为ES5代码。
  |
  |-- .gitignore => git上传忽略特殊文件配置
  |
  |-- index.html
  |
  |-- README.md
  |
  |-- package.json => 定义了这个项目所需要的各种模块，以及项目的配置信息。
  |
  |-- package-lock.json => npm5.0后新增。记录了整个 node_modules
  |                        文件夹的树状结构,当重新安装模块的时候，
  |                        速度加快。但是，生成pack-lock.json后，
  |                        重复执行npm install时将会以其记录的版本来安装。
  |                        这时如果手动修改 package.json 中的版本，
  |                        重新安装也不会生效，只能手动执行npm install
  |                        命令指定依赖版本来进行修改。
  |
  |
  |-- yarn.lock => yarn.lcok文件是自动产生的，
  |                和package-lock.json的功能一样，
  |                只不过yarn可以做到手动更改package.json后，
  |                重新安装并更新lockfile。