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 檔案中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
           

然而會出現以下錯誤：

該問題主要是因為我們沒法直接使用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的引入方式改為：

第一步沒什麼問題，然而在于第二個步驟，當你yarn start啟動項目的時候你會發現tsconfig.json檔案中的paths不見了！一臉懵逼有沒有

理所當然的項目編譯報錯：Cannot find module ‘@/store’

最後在CRA這個issue下找到解決辦法：

在根目錄建立一個paths.json檔案，具體檔案名稱可自行修改，加入以下内容：

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

然後在tsconfig.json中新加：

"extends": "./paths.json"
           

打開App.tsx 檔案檢視store引入不再報錯

最後啟動項目：

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