使用create-react-app 腳手架一 透過create-react-app腳手架 搭建專案首先全域性安裝 create-react-app 腳手架： yarn add -g create-react-app透過create-react-app新建一個專案 npx create-reate-app my-app --typescriptyarn start 可以發現專案正常啟動了二 使用sass ，和 css module

1.yarn add -D node-sass （腳手架已經幫我們安裝好了sass-loader，並且已經配置好了webpack，不需要我們自己去配置了，只需要安裝node-sass就行了）注意：有些時候 安裝node-sass會失敗，可以透過修改安裝源方式解決。在專案根節點新建 .npmrc檔案 ，寫入sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ ，然後重新執行yarn add -D node-sass即可如果遇到sass v5.0.0 不相容 4.0.0的報錯，可先解除安裝node-sass ： yarn remove node-sass ，再定向安裝指定版本的node-sass： yarn add -D [email protected] ，注意先把dev-server伺服器關掉，重新安裝之後再啟動，否則可能出現安裝不成功的情況。2. 腳手架已經幫我們配置css-module 的webpack配置了，只需要我們 新建樣式檔案以 XXX.module.css（scss、less）的方式即可注意：css-module 中修改全域性樣式

// app.modules.scss.normal {      :global {            .ant-button {                  // 此處修改 antd button的樣式，但會在 normal 模組內生效，不會影響到其他地方            }      }}

使用sass和模組化 ，以XXX.module.scss 新建樣式檔案 比如 app.module.scss三 postCss 處理css相容性（透過加字首的方式）

在package.json 中配置 browserlist 來定義相容的目標瀏覽器

4.配置antd的css樣式問題 （由於yanr add antd 之後直接使用antd元件會出現樣式不能生效的問題）方法一 全域性引入antd樣式方法二 webpack配置對antd樣式引入做特殊處理

四 配置路由yarn add react-router-dom2.配置

五 配置redux

1.配置redux2.透過react-redux 配置redux3.redux 非同步處理a redux-thunk的使用b redux-saga的使用c redux-observable的使用4.配置redux 其他中介軟體

六 react開發者工具總結七 webpack配置

1.webpack打包最佳化2.split-chunk 程式碼分割

使用 umi 腳手架一 透過umi腳手架進行搭建專案

1.全域性安裝腳手架 ： yarn add -g umi2.yarn create @umijs/umi-app3.安裝依賴 執行 yarn4.yarn start 介面已經能跑出來了

二 配置sass

由於umi已經配置好了ts 和 less ，可以直接用於開發。如果習慣使用sass的小夥伴只能單獨進行配置了1.yarn add node-sass sass-loader2.yarn add -D @umijs/plugin-sass3.配置 .umirc.ts

{      //...      sass:{} // 在原來基礎上，增加}

4.將原本的less結尾的樣式檔案，改為scss結尾，再重啟專案即可正常使用sass了三 dva的使用四 antd-design-pro 的使用（許可權配置以及國際化）五 程式碼分割 - split-chunk