creact-react-app+antd+scss+less+redux+route+eject後搭建配置
creact-react-app+antd+scss+less+redux+route+eject後搭建配置
1.專案版本及時間：
當前時間2020-09-09，所有版本均為當前最新版
2.專案介紹：
依賴creact-react-app開發配置，安裝完成後eject自定義專案配置內容，增加專案需求的擴充套件功能：
3.相關網站：
- creact-react-app :https://www.html.cn/create-react-app/docs/getting-started
- ant d : https://ant.design/docs/react/getting-started-cn
4.搭建階段一：
全域性安裝：npminstall-gcreate-react-app
進入專案目錄：create-react-appreact-20200909 （大寫報錯）
完成後：cdreact-20200909
釋放配置：npm run eject
回覆：y
目錄結構：（剛執行完的目錄，後期可自己更改）
執行下試試：npm run start
打包試試：npm run build 會多出一個build資料夾
接下來開始我們的改造了。
5.搭建階段二：
-
縱觀文件結構發現有個很多特殊檔案：
src/serviceWorker.js ：
這個檔案可以使用也可以不使用，使用它可以使你的react專案變成一個PWA（Progressive Web Application）, 也就是說，在線上，只要訪問過一次你的網站，下一次即使沒有網路，這個應用依然可以被訪問。當然，它的好處不僅這麼一點點，在移動端開啟專案時，如果你用的是chrome或者firefox這樣的高階瀏覽器，瀏覽器會給你的頁面不太一樣的顯示，你的網頁看起來會更像原生App，實際上體驗也更爽。
public/manifest.json ：
在專案的public目錄下，存在一個manifest.json檔案，你可以在這裡對你的網頁做一些配置，當用戶訪問網頁，生成一個網頁的桌面快捷方式時，會以這個檔案中的內容作為圖示和文字的顯示內容。配置好manifest.json, 使用serviceWorker.js，使用者完全可以把你的網頁快捷方式放到桌面上，因為你的網頁此時支援離線訪問，所以用起來和原生app的體驗很接近。src/App.test.js和src/setupTests.js
是依賴jest 單元測試的程式碼，根據專案可刪可不刪，這裡就不做操作了。
robots.txt
爬蟲檔案，可刪可不刪
-
因為有點強迫症，無論打包之前還是打包之後，專案結構不好看使人不爽，所以從目錄開始修改：
刪除 src目錄下檔案：App.css ， App.js ， index.css ， logo.svg。
此時肯定會報錯，不慌在src目錄下建立以下資料夾：api (介面 ip目錄) components (外掛目錄) assets(圖片字型等) pages(頁面) redux(redux 狀態) routes(路由) test(測試) theme(主題顏色) utils(工具)
打包的時候，看到build檔案下有很多檔案，為了看著簡潔，在public下新建個 src 目錄
刪除public檔案下的.png 檔案，並將.json檔案和.ico和 .txt 放到public/src內。
將src目錄下的 App.test.js和 setupTests.js 檔案放到src/test檔案內。如圖：
- 接下來更改配置檔案內容：
index.html:(直接上程式碼，對比源文件，差別不大)
<!DOCTYPE html> <html lang="zh"> <head> <title>react-20200909</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="description" content="react-20200909"/> <link rel="icon" href="%PUBLIC_URL%/src/favicon.ico"/> <link rel="manifest" href="%PUBLIC_URL%/src/manifest.json"/> </head> <body> <div id="react-20200909"></div> </body> </html>
webpack.config.js:
搜尋 ManifestPlugin 在 fileName 加入src/
搜尋 WorkboxWebpackPlugin.GenerateSW 在下面新增 swDest: 'src/service-worker.js',skipWaiting: true, precacheManifestFilename: 'src/precache-manifest.[manifestHash].js',
這裡要注意下：因為這個外掛原因，目前該版本是4.3.1，現在最新版本是6.0，所以後期可能引數有略微變化，所以報錯時候檢視網站：https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.InjectManifest#InjectManifest
開啟檔案 manifest.json 刪除以下檔案，這個檔案是app端時候會用到：
該刪的以及路徑已經處理完，我們進行下一步驟。
6.搭建階段3：
專案執行前執行安裝依賴模組：
npm i react-redux
npm i history
npm i react-router-dom
npm i redux
npm i lodash
新增redux：
我這裡用到的redux來自網路上的一個框架fengui npm當然我只是應用其中的部分功能，在redux 目錄下新建 store.js actions.js 同級目錄新建reducers目錄下新建vars.js 程式碼如下：
store.js
//store.js import {createStore, combineReducers} from 'redux'; import vars from './reducers/vars'; const mainReducer = combineReducers({ vars, }); const store = createStore(mainReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); const {dispatch, getState, subscribe} = store; export { store as default, dispatch, getState, subscribe };
actions.js
//actions.js export const SET_VARS = 'SET_VARS'; function setVars (key, value) { return { type: SET_VARS, key, value } } let actions = { setVars, }; export { actions as default, setVars, };
vars.js
//vars.js import _ from 'lodash'; const actions = require('../actions') export default function (state = {}, action = {}) { if (action.type === actions.SET_VARS) { return _.assign({}, state, _.fromPairs([[action.key, action.value]])) } return state }
新增路由：
在routes目錄下新建routeMap.jsx 在pages目錄下新建 login.jsx ，main.jsx和404.jsx
routeMap.jsx
//routeMap.jsx
import React from 'react'
import { BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'
import { createBrowserHistory } from 'history'
import Login from '@/pages/login';//普通載入模組
import Main from '@/pages/main';
import NotFound404 from '@/pages/NotFound404';
const history = createBrowserHistory();
class RouteMap extends React.Component {
render () {
return (
<Router history={history}>
<Switch>
<Route path="/" exact component={Login}/>
<Route path="/login" component={Login}/>
<Route path="/main" component={Main}/>
<Route path="/404" component={NotFound404}/>
<Redirect from="/*" to="/404"/>
</Switch>
</Router>
)
}
}
export default RouteMap
//_this.props.history.push('/main')//跳轉可後退
//_this.props.history.replace('/main')//跳轉不可後退
// <Redirect from="/*" to="/" /> //重定向
// <Route path="*" component={NotFound404}/>//預設
login.jsx ，main.jsx和404.jsx, （基本一樣）
import React from 'react' class Login extends React.Component { render () { return ( <div> login或者404或者main </div> ) } } export default Login
修改入口檔案 src/index.js
//index.js //下面這倆是為了能支援ie11，在打包後能使用 //import 'react-app-polyfill/ie11'; //import 'react-app-polyfill/stable'; import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} from 'react-redux' import store from './redux/store'; import RouteMap from './routes/routeMap'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( <Provider store={store}> <RouteMap /> </Provider>, document.getElementById('react-20200909') //要和html對應上！！！！ ); serviceWorker.unregister();
7.搭建階段4：
完成上述，執行中報這個錯，一看原來自己用了 @，那麼新增上配置就行重啟：
在webpack.config.js:搜尋alias 新增 '@': paths.appSrc,
為了提高程式碼質量，我們使用eslint，配置在 package.json內
搜尋 ：eslintConfig新增：重啟
"eslintConfig": { "root": true, "settings": { "import/resolver": { "alias": { "map": [ [ "@", "../src" ] ], "extensions": [ ".js", ".jsx", ".json" ] } } }, "env": { "node": true }, "extends": "react-app", "parserOptions": { "parser": "babel-eslint" }, "rules": { "no-console": "off", "space-before-function-paren": [ "error", "always" ], "no-trailing-spaces": [ "error", { "skipBlankLines": true, "ignoreComments": true } ], "no-multiple-empty-lines": [ "error", { "max": 2, "maxEOF": 0 } ], "indent": [ "error", 2, { "VariableDeclarator": { "var": 2, "let": 2, "const": 3 }, "SwitchCase": 2, "MemberExpression": 1, "FunctionExpression": { "parameters": "first" }, "CallExpression": { "arguments": "first" }, "ArrayExpression": "first", "ObjectExpression": "first", "ImportDeclaration": "first", "flatTernaryExpressions": true, "ignoreComments": true } ], "max-len": [ "error", { "code": 300 } ] } },
具體規則，可以自己配置，這裡只是依據個人愛好隨便加的。注意：新增規則後，規則不通過將在瀏覽器上顯示相關提示警告，請區分錯誤型別！！！！！！！！！！
新增ant d 以及使用 less
npm install antd --save
npm i less-loader
npm i babel-plugin-import
npm i less
npm install node-sass
在webpack.config.js:搜尋sassRegex會發現有兩處，新增less配置 新增如下：
仔細看就是把上面scss程式碼複製下來的，稍微改下程式碼就可以，所以我這裡就不貼出來的。
搜尋 babel-plugin-named-asset-import 在下面新增 [ 'import', { libraryName: 'antd', libraryDirectory: 'es', style: true } ],
在 src/theme 下新建 AllThemeAnt.js新增程式碼：
// 此檔案是 ant基礎樣式檔案，在打包中已經新增，不能實時修改主題顏色，故需要專案啟動前想好主題顏色 // 以下是一些最常用的通用變數，所有樣式變數地址：https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less // 暗黑模式 // const { getThemeVariables } = require('antd/dist/theme'); // module.exports =getThemeVariables({ // dark: true, // 開啟暗黑模式 // compact: true, // 開啟緊湊模式 // }) // 基礎常用樣式配置 module.exports ={ '@primary-color': '#1890ff',// 全域性主色 '@link-color': '#1890ff', // 連結色 '@success-color': '#52c41a', // 成功色 '@warning-color': '#faad14', // 警告色 '@error-color': '#f5222d',// 錯誤色 '@heading-color': 'rgba(0, 0, 0, 0.85)',// 標題色 '@text-color': 'rgba(0, 0, 0, 0.65)', // 主文字色 '@text-color-secondary': 'rgba(0, 0, 0, 0.45)', // 次文字色 '@disabled-color': 'rgba(0, 0, 0, 0.25)', // 失效色 '@border-color-base': '#d9d9d9', // 邊框色 '@border-radius-base': '4px', // 元件/浮層圓角 '@font-size-base': '14px', // 主字號 '@box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // 浮層陰影 };
在 config/paths.js 裡面新增allThemeAntSrc:resolveApp('src/theme/AllThemeAnt.js'),
在 webpack.config.js:
新增const AllThemeAntSrc = require( paths.allThemeAntSrc );
搜尋getStyleLoaders在第一個下面找到 if (preProcessor) { -------- 修改：
if (preProcessor) { let loader = { loader: require.resolve( preProcessor ), options: { sourceMap: true, }, }; if ( preProcessor === "less-loader" ) { loader = { loader: require.resolve( preProcessor ), options: { lessOptions: { javascriptEnabled:true, modifyVars:AllThemeAntSrc, }, sourceMap: true, }, }; } loaders.push( { loader: require.resolve('resolve-url-loader'), options: { sourceMap: isEnvProduction && shouldUseSourceMap, }, }, loader ); }
此時，ant主題已經修改完 less 也已經新增上，重啟就有效果了。
頁面的基本搭建完成，下一篇我將詳細介紹優化內容，以及對出現的bug處理方法。喜歡點個關注吧