因为最近打算用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 文件中