安装依赖
1、核心react
react react-dom react-router react-redux react-router-dom react-router-redux
2、webpack相关
webapck webpack-dev-server webpack-cli webpack-merge(可选) html-webpack-plugin extract-text-webpack-plugin
3、babel相关插件
babel-cli babel-core babel-loader: 核心插件
babel-preset-env babel-preset-react babel-preset-stage-2：处理代码的预设？
注：如果再webpack.config.js中babel-loader中的options配置太复杂，最后配置.babelrc文件。如果配置了.babelrc文件就不用配置options
babel-runtime
babel-polyfill 会给其做兼容。 但是这样做也有一个缺点，就是会污染全局变量，而且项目打包以后体积会增大很多，因为把整个依赖包也搭了进去
react-hot-loader --save: 热更新时需要该插件，即hot:true
import React from 'react'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/lib/integration/react'
import { persistStore } from 'redux-persist'
import { hot } from 'react-hot-loader/root'
import configureStore from './configureStore'
import Router from './routes'
const store = configureStore() // TODO: initalState -> refactory store.js
const persistor = persistStore(store)
function App() {
return (
)
}
export default hot(App) //可以在根路由中设置热更新webpack.config.js:
new HotModuleReplacePlgun(), // 设置热更新
devServer: {
port: 8888,
// 使用热模块更新，必须安装插件
hot:true,
// 自动在启动后打开浏览器
open : true,
openPage:'dist/',.babelrc:
"plugins": [
["react-hot-loader/babel"],
]babel-plugin-import
在编译过程中将 import 的写法自动转换为按需引入的方式
例如在使用ant design时通过在.babelrc中设置["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]使我们可以使用import {XX} from ''antd按需加载antd组件
注：
在使用babel-loader时：webpack 4.x | babel-loader 8.x | babel 7.xwebpack 4.x | babel-loader 7.x | babel 6.x
版本要相对应，不然会报错
4、webpack loader所需相关_loader
css-loader file-loader style-loader less-loader等，用到什么就安装那个
5、规范统一代码风格eslint（校验代码）
eslint: 有三种校验规则，这里使用Airbnb校验规则
eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react
babel-eslint: 解析器（由于现在大部分代码都是使用ES6写的）
搭配prettier（统一代码风格）使用
eslint-plugin-prettier(配合Eslint检测风格) eslint-config-prettier(解决与存在的插件的冲突)
6、检测javascript静态类型（flow）
babel-cli(若前面安装了就不用再安装了) babel-preset-flow flow-bin
安装后： npm(yarn) run flow init 生成.flowconfig
配置文件
webpack
1、
注：当webpack4使用less时，less版本为@3以上，这时需要给less-loader配置：{ loader: 'less-loader', options: { javascriptEnabled: true } }
react-router
BrowserRouter(不带#)或HashRouter
import {BrowserRouter, Switch, Route} from 'react-router-dom'
'ddhdhdhd'} />
react-router + react-redux
import { createStore } from 'redux'
import { Provider } from 'react-redux' //搭配redux和react
import { ConnectedRouter } from 'react-router-redux' //搭配router和redux
import createHistory from 'history/createHashHistory' //需要安装依赖history --save如果要用BrowserHistory使用‘history/createBrowserHistory’
import { PersistGate } from 'redux-persist/lib/integration/react' //PersistGate标签作为网页内容的父标签
import { persistStore } from 'redux-persist' //全局数据持久化存储，在用户刷新后信息不被清空，会将数据存储到浏览器的localStorage中，通过PersistReducer和persistStore
const history = createHistory（）
const store = createStore(); //使用中间件会在后面详细说
const persistor = persistStore(store) //保证store数据永久化
注： 当使用react-router4时，使用ConnectedRouter组件包裹app时，会报错，原因是该版本不能和react-router4协作，可以npm install react-router-redux@next //安装5.0.0-alpha.x
react-router-redux:将react-router 和 redux 集成到一起，用redux的方式去操作react-router。本质上，是把react-router自己维护的状态，例如location、history、path等等，也交给redux管理。一般情况下，是没有必要使用这个库的。
上面的就可以变成：
import { Router } from 'react-router-dom'
import createHistory from 'history/createHashHistory'
const history = createHistory（）
检验代码提交
husky
husky lint-staged(一个前端文件过滤的工具:仅仅过滤出Git代码暂存区文件(被committed的文件)的工具。)
能够防止不规范代码被commit、push、merge等等。
例： 当你git commit的时候，将会现现执行 precommit里的脚本，没有问题了再提交。
package.json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"./src/**/*.js": [
"eslint --fix",
"prettier --write './src/**/*.js'",
"git add ."
]
},在提交代码的时候会先进行代码规范检查
注： 如果husky版本是1.0.0以下，则可以在scrips中添加"precommit": "lint-staged",去掉husky属性