React 基础架构分享

分享一下我的技术选型方案：

React + React-Router + Mobx + Flow + Sass.

此项目是基于 create-react-app 的，由于引入 Mobx 和 Sass，所以需要对 webpack 进行自定义，正是因为需要对脚手架进行修改，我的项目才有可以言喻之处。

前端市场如果写代码没有静态语法检查，总觉得项目拿不出手，不足以登大雅之讲台，我使用的是 flow，看了一遍官方文档，感觉比 ts 讲的更清晰。

UI 框架我的选择是 ant-mobile，另外推荐一个目前很流行的库 styled-components。项目中还会配合 immutable, moment, lodash 的使用。

图标使用 iconfont。

首先：执行 npm run eject 将 webpack 的配置释放出来

其次引入一些第三方包:

npm install -D react-router-dom mobx mobx-react flow-bin node-sass sass-loader ...

flow 是配合 React 做项目开发的静态语法检查的最佳搭档，但是 flow 的静态语法检查默认是不支持第三方库的，所以我提供自己的解决方案:

• flow 默认不支持 import 导入 sass 的方式，也不支持 import webpack alias 的方式，也不支持 mobx 的语法，这里统一下我的解决方案:
• .flowconfig 配置，如上所说全部完美支持:(需要npm install css-module-flow)

  [ignore]
  .*/node_modules/styled-components/.*
  .*/node_modules/rc-util/.*
  .*/node_modules/react-router-dom/node_modules/.*
  .*/node_modules/react-router/node_modules/.*
  
  [include]
  .*/src/.*
  
  [libs]
  
  [lints]
  
  [options]
  module.file_ext=.js
  module.file_ext=.jsx
  module.file_ext=.json
  module.file_ext=.css
  module.file_ext=.scss
  module.name_mapper='.*\(.s?css\)' -> 'css-module-flow'
  module.name_mapper='^@/' ->'<PROJECT_ROOT>/src/'
  esproposal.decorators=ignore
  module.system=haste
  
  [strict]