关于create-react-app中的自定义配置

关于react-development-tools

报错描述:

chrome浏览器中查看react-development-tools时,然后一个一段提示性文字 waiting for roots to load...to reload the inspector, 后一个按钮click Me 点击之后控制台显示错误,
Cannot read property 'displayName' of null来自backend.js中.

解决办法:
升级一下react-development-tools就ok

Warning: Expected server HTML to contain a matching <div> in <div>.

解决办法:

1. 简单点 -> 将ReactDOM.hydrate 直接改成 ReactDOM.render 就可以了.
2. 也有一种更全面的解决办法

配置less

大神的链接
解决办法

配置热更新

大神的链接
解决办法
另一个解决办法

支持IE10

在入口文件中添加:

  import 'core-js/es6/map';
  import 'core-js/es6/set';
  import 'core-js/es6/promise'

官方文档:JavaScript 环境要求

有一个小坑,这个配置好之后在IE10上依然阻断并报错:未定义Map方法.但是打包之后可以在IE10上运行.没有任何阻断性提示

配置webpack代理

在webpackDevServer.config.js中,大概93行,关于proxy中的配置

proxy: {
  '/api': {
    target: 'https://cnodejs.org/api/v1',
    changeOrigin:true,
    pathRewrite: {
      '^/api': '' // 将路径中的api替换掉
  }
  }
},

根据环境来判断调用代理接口还是直接是线上接口.

if (process.env.NODE_ENV === 'development') {
  //开发环境下的代理地址，解决本地跨域跨域，配置在config目录下的index.js dev.proxyTable中
  ROOT = "/api"
} else {
  //生产环境下的地址
  ROOT = baseUrl
}

---

webpackProxy.jpg

配置redux devtools

使得打包完成之后不显示redux信息.

  import { createStore,  applyMiddleware, compose } from 'redux'
  import thunk from 'redux-thunk'
  import reducers from './reducers'

  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

  let exprotCreateStore = process.env.NODE_ENV === 'development' ?
  createStore(reducers, composeEnhancers(applyMiddleware(thunk))) :
  createStore(reducers, applyMiddleware(thunk))

  export default exprotCreateStore