From 7cd22dc7385a047d90f538978f786dc541e6832c Mon Sep 17 00:00:00 2001 From: AlbertLin Date: Sat, 6 Jan 2024 13:21:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20@mango-scripts/react-scripts=20rsbuild?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=A2=9E=E5=8A=A0=E5=AF=B9svg-sprite-loader?= =?UTF-8?q?=E5=92=8Ccss-module=E7=9A=84=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-scripts/package.json | 2 + .../src/rsbuild/config/config.mts | 25 +++++++++- .../loader/compat-svg-sprite-loader.mts | 10 ++++ pnpm-lock.yaml | 50 ++++++++++++++++--- 4 files changed, 77 insertions(+), 10 deletions(-) create mode 100644 packages/react-scripts/src/rsbuild/loader/compat-svg-sprite-loader.mts diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 9a5a606..8ca6968 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -41,6 +41,7 @@ "@mango-scripts/utils": "^2.0.2", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", "@rsbuild/core": "^0.2.4", + "@rsbuild/plugin-babel": "^0.2.17", "@rsbuild/plugin-check-syntax": "^0.2.13", "@rsbuild/plugin-react": "^0.2.4", "@rsbuild/plugin-stylus": "^0.2.13", @@ -113,6 +114,7 @@ "@types/loader-utils": "^2.0.6", "@types/lodash-es": "^4.17.12", "@types/resolve": "^1.20.6", + "@types/svg-sprite-loader": "^3.9.9", "@types/text-table": "^0.2.5", "@types/uglify-js": "^3.17.4", "@types/webpack-bundle-analyzer": "^4.6.3" diff --git a/packages/react-scripts/src/rsbuild/config/config.mts b/packages/react-scripts/src/rsbuild/config/config.mts index 82f5331..339045d 100644 --- a/packages/react-scripts/src/rsbuild/config/config.mts +++ b/packages/react-scripts/src/rsbuild/config/config.mts @@ -1,10 +1,11 @@ -import path from 'node:path' +import { join } from 'node:path' import { defineConfig, loadConfig, mergeRsbuildConfig } from '@rsbuild/core' import { pluginReact } from '@rsbuild/plugin-react' import { pluginTypeCheck } from '@rsbuild/plugin-type-check' import { pluginSvgr } from '@rsbuild/plugin-svgr' import { pluginStylus } from '@rsbuild/plugin-stylus' +import { pluginBabel } from '@rsbuild/plugin-babel' // import { pluginCheckSyntax } from '@rsbuild/plugin-check-syntax' import { getEnv } from '../../common/getEnv.mjs' @@ -29,6 +30,11 @@ export const getRsbuildConfig = async ( pluginSvgr(), pluginStylus(), // pluginCheckSyntax(), + pluginBabel({ + babelLoaderOptions: (config, { addPlugins }) => { + addPlugins([require.resolve('babel-plugin-jsx-css-modules')]) + }, + }), ], output: { polyfill: 'entry', @@ -56,6 +62,21 @@ export const getRsbuildConfig = async ( postcss: (config, { addPlugins }) => { // addPlugins(tailwindcss) }, + bundlerChain(chain, utils) { + chain.module + .rule('svg') + .oneOf('sprite') + .test(/./) + .include.add(paths.svgSpritePath) + .end() + .before('svg-asset-url') + .use('compat-svg-sprite-loader') + .loader(join(__dirname, '../loader/compat-svg-sprite-loader.mjs')) + .options({ symbolId: 'icon-[name]' }) + .end() + .use('svgo') + .loader(require.resolve('svgo-loader')) + }, }, source: { define: env.stringified, @@ -65,7 +86,7 @@ export const getRsbuildConfig = async ( const userConfig = await loadConfig({ cwd: process.cwd(), - path: path.join(process.cwd(), 'mango.config.mjs'), + path: join(process.cwd(), 'mango.config.mjs'), }) return mergeRsbuildConfig(defaultConfig, devConfig, userConfig) diff --git a/packages/react-scripts/src/rsbuild/loader/compat-svg-sprite-loader.mts b/packages/react-scripts/src/rsbuild/loader/compat-svg-sprite-loader.mts new file mode 100644 index 0000000..8337143 --- /dev/null +++ b/packages/react-scripts/src/rsbuild/loader/compat-svg-sprite-loader.mts @@ -0,0 +1,10 @@ +import svgSpriteLoader from 'svg-sprite-loader' + +function loader(this: any, source: string) { + // svg-sprite-loader workaround for rspack, with no extract support. + this._module = this._module || {} + this.target = this.target || 'web' + return svgSpriteLoader.call(this, source) +} + +export default loader diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a5a3e5..92a7c51 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -561,6 +561,9 @@ importers: '@rsbuild/core': specifier: ^0.2.4 version: 0.2.13 + '@rsbuild/plugin-babel': + specifier: ^0.2.17 + version: 0.2.17 '@rsbuild/plugin-check-syntax': specifier: ^0.2.13 version: 0.2.13(@rsbuild/core@0.2.13) @@ -778,6 +781,9 @@ importers: '@types/resolve': specifier: ^1.20.6 version: 1.20.6 + '@types/svg-sprite-loader': + specifier: ^3.9.9 + version: 3.9.9 '@types/text-table': specifier: ^0.2.5 version: 0.2.5 @@ -2462,7 +2468,7 @@ packages: lodash.merge: 4.6.2 lodash.uniq: 4.5.0 resolve-from: 5.0.0 - ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.3.3) + ts-node: 10.9.2(@types/node@18.19.4)(typescript@5.3.3) typescript: 5.3.3 transitivePeerDependencies: - '@swc/core' @@ -4150,6 +4156,18 @@ packages: postcss: 8.4.31 dev: false + /@rsbuild/plugin-babel@0.2.17: + resolution: {integrity: sha512-cYc7C2d3WpRQMMzzG8u7vLTEOIWBmTadC8YtTSjYfu4LLvOXznwPcATxHYkxSNruIGqK6ArM6yTvx1wHKcihlQ==} + dependencies: + '@babel/core': 7.23.7 + '@babel/preset-typescript': 7.23.3(@babel/core@7.23.7) + '@rsbuild/shared': 0.2.17 + '@types/babel__core': 7.20.5 + upath: 2.0.1 + transitivePeerDependencies: + - supports-color + dev: false + /@rsbuild/plugin-check-syntax@0.2.13(@rsbuild/core@0.2.13): resolution: {integrity: sha512-7eJXEs0+WvDRZQWxUCcjdJIUcg6Rmi5L7dDXdjrvLvPPT7UeFyrHDahxgGQOxK7GDdeFw6fuU3sht/Fbp4o/BA==} peerDependencies: @@ -4225,6 +4243,15 @@ packages: postcss: 8.4.31 dev: false + /@rsbuild/shared@0.2.17: + resolution: {integrity: sha512-8NiKlBaULQCZ6tVIWxv0YYzzk75ch9pB9ct3+NxRhThLplWAeVwc2HwoKaSVnYdSWBAgULwoknBVDDeBPmFZVA==} + dependencies: + '@rspack/core': 0.4.5 + caniuse-lite: 1.0.30001572 + lodash: 4.17.21 + postcss: 8.4.31 + dev: false + /@rspack/binding-darwin-arm64@0.4.5: resolution: {integrity: sha512-H7RaSPN9VEzZf4URZpVV0Is4I1mgOHCzYVxDUZ/9G5vMkTW5baktCxFwbmBPYKcZ8Zoj/hy/DE8fmt1L200NmQ==} cpu: [arm64] @@ -4673,13 +4700,11 @@ packages: '@types/babel__generator': 7.6.8 '@types/babel__template': 7.4.4 '@types/babel__traverse': 7.20.5 - dev: true /@types/babel__generator@7.6.8: resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==} dependencies: '@babel/types': 7.23.6 - dev: true /@types/babel__helper-plugin-utils@7.10.3: resolution: {integrity: sha512-FcLBBPXInqKfULB2nvOBskQPcnSMZ0s1Y2q76u9H1NPPWaLcTeq38xBeKfF/RBUECK333qeaqRdYoPSwW7rTNQ==} @@ -4692,13 +4717,11 @@ packages: dependencies: '@babel/parser': 7.23.6 '@babel/types': 7.23.6 - dev: true /@types/babel__traverse@7.20.5: resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==} dependencies: '@babel/types': 7.23.6 - dev: true /@types/body-parser@1.19.5: resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==} @@ -5071,6 +5094,12 @@ packages: resolution: {integrity: sha512-5JcVt1u5HDmlXkwOD2nslZVllBBc7HDuOICfiZah2Z0is8M8g+ddAEawbmd3VjedfDHBzxCaXLs07QEmb7y54g==} dev: true + /@types/svg-sprite-loader@3.9.9: + resolution: {integrity: sha512-oMUlgkvNw8lIuZ9lw0LBIWEdIS9CtDht505ilTWdmjihkRa7pGtly/W5PsI7YSHuzeqhtB7CoTqdVm8ADoISBw==} + dependencies: + '@types/webpack': 4.41.38 + dev: true + /@types/tapable@1.0.12: resolution: {integrity: sha512-bTHG8fcxEqv1M9+TD14P8ok8hjxoOCkfKc8XXLaaD05kI7ohpeI956jtDOD3XHKBQrlyPughUtzm1jtVhHpA5Q==} dev: true @@ -7231,7 +7260,7 @@ packages: dependencies: '@types/node': 20.5.1 cosmiconfig: 8.3.6(typescript@5.3.3) - ts-node: 10.9.2(@types/node@20.5.1)(typescript@5.3.3) + ts-node: 10.9.2(@types/node@18.19.4)(typescript@5.3.3) typescript: 5.3.3 dev: true @@ -16868,7 +16897,7 @@ packages: /ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} - /ts-node@10.9.2(@types/node@20.5.1)(typescript@5.3.3): + /ts-node@10.9.2(@types/node@18.19.4)(typescript@5.3.3): resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==} hasBin: true peerDependencies: @@ -16887,7 +16916,7 @@ packages: '@tsconfig/node12': 1.0.11 '@tsconfig/node14': 1.0.3 '@tsconfig/node16': 1.0.4 - '@types/node': 20.5.1 + '@types/node': 18.19.4 acorn: 8.11.3 acorn-walk: 8.3.1 arg: 4.1.3 @@ -17303,6 +17332,11 @@ packages: engines: {node: '>=4'} dev: false + /upath@2.0.1: + resolution: {integrity: sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==} + engines: {node: '>=4'} + dev: false + /update-browserslist-db@1.0.13(browserslist@4.22.2): resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} hasBin: true