前端-react项目徒手搭思路整理

  1. webpack配置概念：
    • entry
    • output
    • loader
    • plugin
  1. 支持react
    配置.babellrc 同时config增加babel-loader rules
    es6=>react=>Component化 开始填充src/component index.js使用react.dom做最外层dom操作
  1. react架构
    • index.js / App.js
    • src/component/..
    • src/router/.. getRouter()
    • src/pages/..
  1. 起服务
    • Nginx..
    • webpack-dev-server..
  1. 热更新
    • cli -hot
    • react-hot-loader (改babelrc, webpack-config改entry,改index.js)

  1. redux架构

    • src/redux/reducers/counter.js
    • src/redux/actions/counter.js
    • src/redux/reducers/reducers.js
    • src/redux/reducers/store.js

    actions里面的每个js,类似一个类，定义每个行为的变量和get函数, get函数返回格式为 {type: 变量}

    reducer是相应事件的数据容器和处理器，可combineReducers将多个事件的处理器集合

    store是封装的总入口 creatStore(combineReducers)，创建，并且被调用，自带一些功能函数

  1. react-redux 全局store
    • 需要数据处理的页面内: export default connect(mapStateToProps, mapDispatchToProps)(组件名) 定义mapStateToProps，mapDispatchToProps 使得jsx context内可直接通过this.props调用相应的state/dispatch funcs
    • index.js 加
  1. redux-thunk
    异步action，统一处理请求对各种数据的处理，并且将请求函数放在action管理，为了支持action返回函数，引入redux-thunk (改store.js)
  1. 按需加载
    createComponent * bundle.js源码看的有点晕。。

  1. 缓存/html-webpack-plugin

  2. 提取公共代码

  3. 构建生产环境

  4. 压缩文件 uglifyPlugin

其他优化点：打包优化（clean）、抽取css、css Module、Mockjs、webpack公共配置

参考：从零搭建