因为最近打算用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会有警告提示：
image.png
删除该警告只需要在根目录tsconfig.json 文件中compilerOptions下设置experimentalDecorators为true即可（此时可能需要重启vscode才能生效）
更新App.tsx
import React from "react";
import { Provider } from "mobx-react"
import store from "./store";
function App() {
return (
<Provider {...store}>
<div>this is app</div>
</Provider>
);
}
export default App;
然后启动项目：
yarn start
然而会出现以下错误：
image.png
该问题主要是因为我们没法直接使用es7的decorator修饰器，需要配置babel进行转译
此时注意：由于网上目前大部分的资料并不适用，导致在这里踩了坑
在.babelrc 或package.json中使用插件，但是实测无效
{
"presets": ['react-app', '@babel/preset-env'],
"plugins": [["@babel/plugin-proposal-decorators", { legacy: true }]]
}
后来在翻customize-cra文档的时候看到addDecoratorsLegacy()方法，于是在config-overrides.js文件中添加：
const { override, addDecoratorsLegacy } = require('customize-cra');
module.exports = override(
addDecoratorsLegacy(),
);
安装@babel/plugin-proposal-decorators：
yarn add @babel/plugin-proposal-decorators -D
然后重新yarn start启动项目：编译成功~
三、设置别名alias
网上大部分资料都是以下两个步骤：
1.修改config-overrides.js文件：
const { override, addWebpackAlias, addDecoratorsLegacy } = require('customize-cra');
const path = require('path')
module.exports = override(
addWebpackAlias({
"@": path.resolve(__dirname, 'src')
}),
addDecoratorsLegacy(),
);
2.在tsconfig.json文件中新增paths:
{
"compilerOptions": {
"experimentalDecorators": true,
"baseUrl": "src",
"paths": {
"@/*": ["src/*"]
},
...
}
}
将App.tsx中store的引入方式改为：
import store from '@/store'
第一步没什么问题，然而在于第二个步骤，当你yarn start启动项目的时候你会发现tsconfig.json文件中的paths不见了！一脸懵逼有没有
理所当然的项目编译报错：Cannot find module '@/store'
image.png
最后在CRA这个issue下找到解决办法：
在根目录新建一个paths.json文件，具体文件名称可自行修改，加入以下内容：
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["*"]
}
}
}
然后在tsconfig.json中新加：
"extends": "./paths.json"
打开App.tsx 文件查看store引入不再报错
image.png
最后启动项目：
image.png
ok，大功告成！
参考资料：
https://github.com/arackaf/customize-cra/blob/master/api.md#adddecoratorslegacy
https://github.com/facebook/create-react-app/issues/5645
https://ant.design/docs/react/use-in-typescript-cn
网友评论