一、修改webpack配置
使用create-react-app創建項目后,webpack配置無法修改,執行npm run eject 彈出配置文件,即可更改webpack配置
執行完畢后,會多一個config和scripts文件夾,並且package.json中多了很多配置
注意!!!執行之后,直接npm start時,如果報錯,需要重新npm install一下,install完之后,再npm start即可運行。
二、添加TypeScripts依賴
如果尚未創建項目,則執行
npx create-react-app my-app --typescript
或者
yarn create react-app my-app --typescript
如果已經創建項目,則執行
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
或者
yarn add typescript @types/node @types/react @types/react-dom @types/jest
當ts添加成功之后,需要將我們文件中的js文件更改為tsx,並重新啟動
注意!!!沒有tsconfig文件會報錯
如果未自動生成tsconfig文件,則需要自己通過命令生成。
首先tsc -v,版本大於1.6時執行tsc --init,生成tsconfig文件
三、添加Ant Design
Ant Design官網 https://ant.design/docs/react/use-with-create-react-app-cn
使用yarn或者npm安裝antd
yarn add antd
安裝完成之后,在index入口文件引入antd的css樣式
import 'antd/dist/antd.css'
四、添加Router路由
添加路由執行 npm install --save react-router-dom 或者 yarn add react-router-dom
運行完畢之后,發現報錯
根據提示,直接執行 npm install @types/react-router-dom,安裝完成之后,不再報錯。
注:如果還有其他提示無法找到模塊xxx的聲明文件,處理方法同路由 npm install @types/xxx ,比如react,react-dom
npm install @types/react npm install @types/react-dom
當然,不想如此解決,也可參考https://www.jianshu.com/p/35742227738e,該文章所說的兩種方法都可以使用。