From 8eb9d49794c121265fc0b1eca8984059d6bafce4 Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Tue, 17 Aug 2021 05:51:58 +0800 Subject: [PATCH 1/4] =?UTF-8?q?craco=20=E7=89=881?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 1 - config-overrides.js | 46 --------------------------------------------- craco.config.js | 19 +++++++++++++++++++ package.json | 10 +++++----- 4 files changed, 24 insertions(+), 52 deletions(-) delete mode 100644 config-overrides.js create mode 100644 craco.config.js diff --git a/.eslintignore b/.eslintignore index 468b05e..cd44718 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,6 +1,5 @@ src/registerServiceWorker.js src/**/test/** -config-overrides.js /build /config src/serviceWorker.js diff --git a/config-overrides.js b/config-overrides.js deleted file mode 100644 index 58b49e4..0000000 --- a/config-overrides.js +++ /dev/null @@ -1,46 +0,0 @@ -/* eslint-disable */ -const { override, addWebpackAlias, fixBabelImports, addWebpackPlugin, adjustStyleLoaders } = require('customize-cra') -const path = require('path') -const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin') - -if (process.env.NODE_ENV === 'production') { - process.env.GENERATE_SOURCEMAP = 'false' -} - -function resolve(dir) { - return path.join(__dirname, dir) -} - -const addCustomize = () => (config) => { - return config -} - -module.exports = override( - fixBabelImports('import', { - libraryName: 'antd', - libraryDirectory: 'es', - style: true // 自动打包相关的样式 - }), - - // 配置路径别名 - addWebpackAlias({ - '@': resolve('src') - }), - - // 替换moment.js - addWebpackPlugin(new AntdDayjsWebpackPlugin()), - - adjustStyleLoaders((rule) => { - if (rule.test.toString().includes('scss')) { - rule.use.push({ - loader: require.resolve('sass-resources-loader'), - options: { - resources: [ - './src/styles/_variables.scss', //这里是你自己放公共scss变量的路径 - './src/styles/_mixins.scss', - ] - } - }) - } - }) -) diff --git a/craco.config.js b/craco.config.js new file mode 100644 index 0000000..523744f --- /dev/null +++ b/craco.config.js @@ -0,0 +1,19 @@ +// const sassResourcesLoader = require('craco-sass-resources-loader') +const path = require('path') + +const resolve = (dir) => path.join(__dirname, dir) + +module.exports = { + webpack: { + alias: { + '@': resolve('src'), + }, + }, + babel: { + plugins: [ + ['import', { libraryName: 'antd', style: true }], + ['@babel/plugin-proposal-decorators', { legacy: true }], + ], + }, + plugins: [], +} diff --git a/package.json b/package.json index 9dcc2c2..abcdaf1 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "homepage": "/react-store-admin", "dependencies": { "@ant-design/icons": "^4.6.2", + "@craco/craco": "^6.2.0", "@icon-park/react": "^1.3.3", "@types/node": "^15.12.4", "@types/react": "^17.0.11", @@ -30,10 +31,10 @@ "web-vitals": "^1.1.2" }, "scripts": { - "start": "react-app-rewired start", - "build": "react-app-rewired --max-old-space-size=4096 build", - "test": "react-app-rewired test", - "eject": "react-app-rewired eject", + "start": "craco start", + "build": "craco --max-old-space-size=4096 build", + "test": "craco test", + "eject": "react-scripts eject", "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ." }, "eslintConfig": { @@ -77,7 +78,6 @@ "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.2.0", "node-sass": "^6.0.0", - "react-app-rewired": "^2.1.8", "sass-resources-loader": "^2.2.3", "typescript": "^4.3.4", "typescript-plugin-css-modules": "^3.4.0" -- Gitee From 1d5071db44aca3e07fd5cc6ec0695fdd74746a5d Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Tue, 17 Aug 2021 06:06:04 +0800 Subject: [PATCH 2/4] =?UTF-8?q?=E5=BF=BD=E7=95=A5webstorm=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 82c1b4c..9c8cf76 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ .AppleDouble .LSOverride node_modules/ +.idea/ # Icon must end with two \r -- Gitee From a4247a94b8961ab01cab7d0a9ff9d6c668a7038a Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Tue, 17 Aug 2021 06:12:14 +0800 Subject: [PATCH 3/4] =?UTF-8?q?eslint=E5=BF=BD=E7=95=A5carco=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 1 + craco.config.js | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.eslintignore b/.eslintignore index cd44718..29a10d6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,6 @@ src/registerServiceWorker.js src/**/test/** +craco.config.js /build /config src/serviceWorker.js diff --git a/craco.config.js b/craco.config.js index 523744f..3a17379 100644 --- a/craco.config.js +++ b/craco.config.js @@ -6,14 +6,14 @@ const resolve = (dir) => path.join(__dirname, dir) module.exports = { webpack: { alias: { - '@': resolve('src'), - }, + '@': resolve('src') + } }, babel: { plugins: [ ['import', { libraryName: 'antd', style: true }], - ['@babel/plugin-proposal-decorators', { legacy: true }], + ['@babel/plugin-proposal-decorators', { legacy: true }] ], }, - plugins: [], + plugins: [] } -- Gitee From d0e1a99f3201aabbc4f19550e2bf126c1128c560 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= Date: Tue, 17 Aug 2021 17:44:48 +0800 Subject: [PATCH 4/4] =?UTF-8?q?craco=E9=85=8D=E7=BD=AE=E7=89=882?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 新增环境区分 2. 新增打包分析，打包进度， 3. 配置别名 4. ant按需加载 5. dayjs antd替换掉momentjs antd --- craco.config.js | 64 +++++++++++++++++++++++++++++++++++++++++++------ package.json | 4 +++- 2 files changed, 60 insertions(+), 8 deletions(-) diff --git a/craco.config.js b/craco.config.js index 3a17379..36c3beb 100644 --- a/craco.config.js +++ b/craco.config.js @@ -1,19 +1,69 @@ -// const sassResourcesLoader = require('craco-sass-resources-loader') -const path = require('path') +/* craco.config.js */ +/** + * TODO: 区分环境 —— NODE_ENV + * - whenDev ☞ process.env.NODE_ENV === 'development' + * - whenTest ☞ process.env.NODE_ENV === 'test' + * - whenProd ☞ process.env.NODE_ENV === 'production' + */ + const { when, whenDev, whenProd, whenTest } = require('@craco/craco') +const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); +const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' ) +const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin') +// const FastRefreshCracoPlugin = require('craco-fast-refresh') +const path = require('path'); -const resolve = (dir) => path.join(__dirname, dir) +// 判断编译环境是否为生产 +const isProduction = process.env.NODE_ENV === 'production' + +if (isProduction) { + process.env.GENERATE_SOURCEMAP = 'false' +} + +const resolve = (dir) => path.join(__dirname, dir); module.exports = { webpack: { alias: { - '@': resolve('src') - } + '@': resolve('src'), + '@api': resolve('src/api'), + '@assects': resolve('src/assets'), + '@compontents': resolve('src/compontents'), + '@config': resolve('src/config'), + '@hooks': resolve('src/hooks'), + '@hooks': resolve('src/interface'), + '@hooks': resolve('src/layouts'), + '@hooks': resolve('src/model'), + '@hooks': resolve('src/router'), + '@hooks': resolve('src/store'), + '@hooks': resolve('src/styles'), + '@hooks': resolve('src/typings'), + '@hooks': resolve('src/utils'), + '@hooks': resolve('src/views'), + }, + plugins: [ + // 观察打包进度 + new SimpleProgressWebpackPlugin(), + // 时间转换工具采取day替换moment + new AntdDayjsWebpackPlugin(), + ...when( + !isProduction, () => [ + // 打包分析，生产环境关闭 + new BundleAnalyzerPlugin() + ], [] + ), + ] }, babel: { plugins: [ - ['import', { libraryName: 'antd', style: true }], + // AntDesign 按需加载 + ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], + // 用来支持装饰器 ['@babel/plugin-proposal-decorators', { legacy: true }] ], }, - plugins: [] + plugins: [ + // { + // plugin: FastRefreshCracoPlugin + // } + ] } diff --git a/package.json b/package.json index abcdaf1..598c084 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,9 @@ "react-scripts": "4.0.3", "react-transition-group": "^4.4.2", "screenfull": "^5.1.0", - "web-vitals": "^1.1.2" + "simple-progress-webpack-plugin": "^2.0.0", + "web-vitals": "^1.1.2", + "webpack-bundle-analyzer": "^4.4.2" }, "scripts": { "start": "craco start", -- Gitee