react + typescript 集成mobx和设置别名alias最新解决方案

因为最近打算用react+typescript写一个新项目，结果在集成mobx以及webpack 文件路径别名alias设置上碰到不少问题，在网上查了一些资料，然而大部分文章的解决方法因为使用工具的版本更新已经不再适用，因此在解决问题后打算写篇文章记录下期间踩过的坑。

一、通过create-react-app 搭建react项目

这一步没什么好说的，根据官方文档步骤即可
1.全局安装CRA

npm i create-react-app -g 

2.新建react+typescript项目

npx create-react-app my-app --typescript 
// 或者
yarn create react-app my-app --typescript

二、集成mobx

1.安装mobx

yarn add mobx mobx-react

2.安装react-app-rewired customize-cra
主要用于重写cra的webpack配置 下面会用到

yarn add react-app-rewired customize-cra

修改package.json中的scripts脚本

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

在项目中使用mobx：

// 新建一个store.js
import {
    observable } from 'mobx'
class Store {
   
  @observable
  todo = {
   }
}
export default new Store()

这时候xcode会有警告提示：

删除该警告只需要在根目录tsconfig.json 文件中