From a444fab11d9ee90f694d2657370f062f3412901d Mon Sep 17 00:00:00 2001 From: lvzhengyu Date: Fri, 2 Jul 2021 15:42:04 +0800 Subject: [PATCH 1/2] =?UTF-8?q?'antd=E9=85=8D=E8=BD=BDwebpack=E9=85=8D?= =?UTF-8?q?=E8=BD=BD'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 +- craco.config.js | 27 +++++++++++++++++++++++++++ package.json | 11 +++++++---- src/App.js | 4 ++-- src/App.less | 40 ++++++++++++++++++++++++++++++++++++++++ 5 files changed, 77 insertions(+), 7 deletions(-) create mode 100644 craco.config.js create mode 100644 src/App.less diff --git a/.gitignore b/.gitignore index 800f3a8..960b87d 100644 --- a/.gitignore +++ b/.gitignore @@ -10,7 +10,6 @@ # production /build -/dist # misc .DS_Store @@ -22,3 +21,4 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +yarn.lock \ No newline at end of file diff --git a/craco.config.js b/craco.config.js new file mode 100644 index 0000000..cba1f5a --- /dev/null +++ b/craco.config.js @@ -0,0 +1,27 @@ +/** + *@author SaoBear + *@action 新增 + *@date 2021-06-29 18:08:14 + *@description craco.config 添加craco 覆盖 webpack 设置 + */ +const CracoLessPlugin = require("craco-less"); +const WebpackBar = require("webpackbar"); + +module.exports = { + webpack: { + plugins: [new WebpackBar({ name: `react-store-admin`, profile: true })], + }, + plugins: [ + { + plugin: CracoLessPlugin, + options: { + lessLoaderOptions: { + lessOptions: { + modifyVars: { "@primary-color": "#1DA57A" }, + javascriptEnabled: true, + }, + }, + }, + }, + ], +}; diff --git a/package.json b/package.json index fde7fda..229f333 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@types/react-router": "^5.1.15", "antd": "^4.16.3", "axios": "^0.21.1", + "craco-less": "^1.18.0", "dayjs": "^1.10.5", "js-cookie": "^2.2.1", "react": "^17.0.2", @@ -26,12 +27,13 @@ "redux": "^4.1.0", "redux-thunk": "^2.3.0", "screenfull": "^5.1.0", - "web-vitals": "^1.1.2" + "web-vitals": "^1.1.2", + "webpackbar": "^5.0.0-3" }, "scripts": { - "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", + "start": "craco start", + "build": "craco build", + "test": "craco test", "eject": "react-scripts eject" }, "eslintConfig": { @@ -53,6 +55,7 @@ ] }, "devDependencies": { + "@craco/craco": "^6.1.2", "@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/parser": "^4.28.0", "antd-dayjs-webpack-plugin": "^1.0.6", diff --git a/src/App.js b/src/App.js index 3784575..188a182 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ -import logo from './logo.svg'; -import './App.css'; +import logo from "./logo.svg"; +import "./App.less"; function App() { return ( diff --git a/src/App.less b/src/App.less new file mode 100644 index 0000000..63026cc --- /dev/null +++ b/src/App.less @@ -0,0 +1,40 @@ +@import '~antd/dist/antd.less'; + +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} -- Gitee From b147082ceff3cf51d9a8e3a8820d6f8dd337ff60 Mon Sep 17 00:00:00 2001 From: lvzhengyu Date: Fri, 2 Jul 2021 16:24:34 +0800 Subject: [PATCH 2/2] =?UTF-8?q?'=E6=B7=BB=E5=8A=A0webpack=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E6=B7=BB=E5=8A=A0ts=E6=94=AF=E6=8C=81'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- craco.config.js | 54 ++++++++++++++++++++++++++++++++++++- package.json | 3 ++- src/App.css | 38 -------------------------- src/{App.js => App.tsx} | 6 ++--- src/{index.js => index.tsx} | 0 src/react-app-env.d.ts | 1 + tsconfig.json | 26 ++++++++++++++++++ 7 files changed, 85 insertions(+), 43 deletions(-) delete mode 100644 src/App.css rename src/{App.js => App.tsx} (89%) rename src/{index.js => index.tsx} (100%) create mode 100644 src/react-app-env.d.ts create mode 100644 tsconfig.json diff --git a/craco.config.js b/craco.config.js index cba1f5a..783d564 100644 --- a/craco.config.js +++ b/craco.config.js @@ -4,13 +4,28 @@ *@date 2021-06-29 18:08:14 *@description craco.config 添加craco 覆盖 webpack 设置 */ +const path = require("path"); const CracoLessPlugin = require("craco-less"); +const resolve = (dir) => path.join(__dirname, ".", dir); const WebpackBar = require("webpackbar"); - +const CracoAntDesignPlugin = require("craco-antd"); module.exports = { webpack: { + alias: { + "@": resolve("src"), + }, plugins: [new WebpackBar({ name: `react-store-admin`, profile: true })], }, + devServer: (devServerConfig, { proxy }) => { + devServerConfig.proxy = { + ...proxy, + "/api": { + target: "http://139.198.172.231:8490/", + changeOrigin: true, + }, + }; + return devServerConfig; + }, plugins: [ { plugin: CracoLessPlugin, @@ -23,5 +38,42 @@ module.exports = { }, }, }, + { + plugin: CracoAntDesignPlugin, + options: { + lessLoaderOptions: { + lessOptions: { + javascriptEnabled: true, + sourceMap: false, + }, + }, + cssLoaderOptions: { + modules: { + localIdentName: "[local]_[hash:base64:5]", + // 回调必须返回 `local`，`global`，或者 `pure` + mode: (resourcePath) => { + if (/pure\.(less|css)$/i.test(resourcePath)) { + return "pure"; + } + + if (/(global)\.(less|css)$/i.test(resourcePath)) { + return "global"; + } + + if (/antd/i.test(resourcePath)) { + return "global"; + } + + return "local"; + }, + }, + }, + babelPluginImportOptions: { + libraryName: "antd", + libraryDirectory: "es", + style: true, + }, + }, + }, ], }; diff --git a/package.json b/package.json index 229f333..1581fa9 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@types/react-router": "^5.1.15", "antd": "^4.16.3", "axios": "^0.21.1", + "craco-antd": "^1.19.0", "craco-less": "^1.18.0", "dayjs": "^1.10.5", "js-cookie": "^2.2.1", @@ -71,6 +72,6 @@ "eslint-plugin-react-hooks": "^4.2.0", "node-sass": "^6.0.0", "react-app-rewired": "^2.1.8", - "typescript": "^4.3.4" + "typescript": "^4.3.5" } } diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.tsx similarity index 89% rename from src/App.js rename to src/App.tsx index 188a182..b2ed10b 100644 --- a/src/App.js +++ b/src/App.tsx @@ -1,7 +1,7 @@ +import React from "react"; import logo from "./logo.svg"; import "./App.less"; - -function App() { +const App: React.FC = () => { return (
@@ -20,6 +20,6 @@ function App() {
); -} +}; export default App; diff --git a/src/index.js b/src/index.tsx similarity index 100% rename from src/index.js rename to src/index.tsx diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..a273b0c --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ] +} -- Gitee