React添加部分依賴


一、修改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,該文章所說的兩種方法都可以使用。

  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM