react+redux框架配置从无到有直到正常运行全流程（上）

写于：2017-1-18

完整干净demo地址：coding.net/u/java_luo/p/react_luo/git

技术栈：
react，redux，webpack，eslint，babel，antd(蚂蚁金服ui)

---

1、前期准备

---

①、windows系统，本框架是在windows系统下配置的
②、SublimeText， 用的这个编辑器
②、安装node.js
③、创建一个文件夹，用node命令行工具进入该文件夹，运行npm init命令 生成一个初始package.json

---

2、配置package.json

---

{
  "name": "myreact", // 项目名字
  "version": "1.0.0", // 项目版本
  "description": "...", // 项目简介
  "main": "index.js", // 项目入口js，用不到，写一个在这里当摆设
  "scripts": {
    "watch": "node server.js", // 开发模式运行此命令启动服务
    "build": "webpack -p --config webpack.production.config.js --progress --profile --colors" // 项目最终打包 运行此命令（webpack.production.config.js是后面要创建的webpack配置文件）
  },
  "author": "luo", // 项目作者
  "license": "ISC", // 项目开源许可证
  "private": true, // 项目是否私有

  // 项目最终需要依赖的插件
  "dependencies": {
    "antd": "^2.6.3", // 蚂蚁金服的ui库
    "babel-polyfill": "^6.20.0", // 用于解析ES6各种新功能（比如map,set,Generator等）
    "react": "^15.4.2", // react框架核心
    "react-dom": "^15.4.2", // react渲染组件时要用
    "react-redux": "^5.0.1", // react与redux连接的桥梁
    "react-router": "^3.0.0", // react路由器，做路由要用
    "react-router-redux": "^4.0.7", // react路由与redux连接的桥梁
    "redux": "^3.6.0", // redux核心
    "redux-thunk": "^2.1.0", // redux中间件，用于处理异步action
    "reqwest": "^2.0.5" // 一个工具插件，封装了fetch，异步请求时有用
  },

 // 开发模式下需要依赖的插件
  "devDependencies": {
    "babel-core": "^6.21.0", // babel核心
    "babel-loader": "^6.2.10", // webpack解析器：用于打包时解析ES6
    "babel-plugin-import": "^1.1.0", // 按需加载，用于蚂蚁金服ui库，用了哪些ui组件，就编译哪些组件
    "babel-preset-es2015": "^6.18.0", // babel插件：解析ES6语法
    "babel-preset-react": "^6.16.0", // babel插件：解析react语法（JSX）
    "babel-preset-stage-3": "^6.17.0", // babel插件：解析js目前最新版本的一些语法
    "css-loader": "^0.26.1", // webpack解析器：打包时处理css,less,sass这类文件中的url路径问题，比如background-image的路径,会自动匹配项目的根路径
    "eslint": "^3.13.1", // 一个语法检查器，在开发的时候常用来规范代码风格和排错
    "eslint-loader": "^1.6.1", // webpack解析器：把eslint加到webpack中使用，所以需要这个
    "eslint-plugin-react": "^6.9.0", // eslint插件：支持检查react的语法
    "extract-text-webpack-plugin": "^1.0.1", // 项目最终打包时，单独把所有样式文件打包成一个css文件，需要这个
    "file-loader": "^0.9.0", // webpack解析器：打包时解析各种非图片类文件和gif文件
    "html-webpack-plugin": "^2.26.0", // webpack插件：打包时自动生成一个index.html
    "less": "^2.7.2", // less核心
    "less-loader": "^2.2.3", // webpack解析器：打包时解析less
    "style-loader": "^0.13.1", // webpack解析器：打包时将样式文件添加进页面中，自动生成