因?yàn)樽罱蛩阌胷eact+typescript寫(xiě)一個(gè)新項(xiàng)目，結(jié)果在集成mobx以及webpack 文件路徑別名alias設(shè)置上碰到不少問(wèn)題，在網(wǎng)上查了一些資料，然而大部分文章的解決方法因?yàn)槭褂霉ぞ叩陌姹靖乱呀?jīng)不再適用，因此在解決問(wèn)題后打算寫(xiě)篇文章記錄下期間踩過(guò)的坑。

一、通過(guò)create-react-app 搭建react項(xiàng)目

這一步?jīng)]什么好說(shuō)的，根據(jù)官方文檔步驟即可
1.全局安裝CRA

npm i create-react-app -g 

2.新建react+typescript項(xiàng)目

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
主要用于重寫(xiě)cra的webpack配置 下面會(huì)用到

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"
  },

在項(xiàng)目中使用mobx：

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

這時(shí)候xcode會(huì)有警告提示：

image.png

刪除該警告只需要在根目錄tsconfig.json 文件中compilerOptions下設(shè)置experimentalDecorators為true即可（此時(shí)可能需要重啟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;

然后啟動(dòng)項(xiàng)目：

yarn start

然而會(huì)出現(xiàn)以下錯(cuò)誤：

image.png

該問(wèn)題主要是因?yàn)槲覀儧](méi)法直接使用es7的decorator修飾器，需要配置babel進(jìn)行轉(zhuǎn)譯

此時(shí)注意：由于網(wǎng)上目前大部分的資料并不適用，導(dǎo)致在這里踩了坑

在.babelrc 或package.json中使用插件，但是實(shí)測(cè)無(wú)效

{
"presets": ['react-app', '@babel/preset-env'],
"plugins": [["@babel/plugin-proposal-decorators", { legacy: true }]] 
}

后來(lái)在翻customize-cra文檔的時(shí)候看到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啟動(dòng)項(xiàng)目：編譯成功~

三、設(shè)置別名alias

網(wǎng)上大部分資料都是以下兩個(gè)步驟：
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'

第一步?jīng)]什么問(wèn)題，然而在于第二個(gè)步驟，當(dāng)你yarn start啟動(dòng)項(xiàng)目的時(shí)候你會(huì)發(fā)現(xiàn)tsconfig.json文件中的paths不見(jiàn)了！一臉懵逼有沒(méi)有
理所當(dāng)然的項(xiàng)目編譯報(bào)錯(cuò)：Cannot find module '@/store'

image.png

最后在CRA這個(gè)issue下找到解決辦法：
在根目錄新建一個(gè)paths.json文件，具體文件名稱可自行修改，加入以下內(nèi)容：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"]
    }
  }
}

然后在tsconfig.json中新加：

"extends": "./paths.json"

打開(kāi)App.tsx 文件查看store引入不再報(bào)錯(cuò)

image.png

最后啟動(dòng)項(xiàng)目：

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