refactor: adapt Rsbuild environment config (#5940)

web-infra-dev · Jul 16, 2024 · b912ca5 · b912ca5
1 parent d36f095
commit b912ca5
Show file tree

Hide file tree

Showing 83 changed files with 3,789 additions and 1,880 deletions.
diff --git a/.changeset/moody-humans-cheer.md b/.changeset/moody-humans-cheer.md
@@ -0,0 +1,6 @@
+---
+'@modern-js/app-tools': minor
+'@modern-js/uni-builder': minor
+---
+
+refactor: bump rsbuild 1.0.0-alpha and use Rsbuild environment config
diff --git a/packages/cli/babel-preset/package.json b/packages/cli/babel-preset/package.json
@@ -61,7 +61,7 @@
     "@babel/preset-typescript": "^7.24.7",
     "@babel/runtime": "^7.24.7",
     "@babel/types": "^7.24.7",
-    "@rsbuild/plugin-babel": "0.7.10",
+    "@rsbuild/plugin-babel": "1.0.1-beta.2",
     "@swc/helpers": "0.5.3",
     "@types/babel__core": "^7.20.5",
     "babel-plugin-dynamic-import-node": "2.3.3",

diff --git a/packages/cli/plugin-bff/package.json b/packages/cli/plugin-bff/package.json
@@ -86,7 +86,7 @@
     "memfs": "^3.5.1",
     "ts-jest": "^29.1.0",
     "typescript": "^5",
-    "webpack": "^5.92.0"
+    "webpack": "^5.93.0"
   },
   "sideEffects": false,
   "publishConfig": {

diff --git a/packages/cli/plugin-data-loader/package.json b/packages/cli/plugin-data-loader/package.json
@@ -75,7 +75,7 @@
     "supertest": "^6.1.6",
     "ts-jest": "^29.1.0",
     "typescript": "^5",
-    "webpack": "^5.92.0",
+    "webpack": "^5.93.0",
     "react": "^18",
     "react-dom": "^18"
   },

diff --git a/packages/cli/plugin-swc/package.json b/packages/cli/plugin-swc/package.json
@@ -38,8 +38,8 @@
     "test": "jest"
   },
   "dependencies": {
-    "@rsbuild/core": "0.7.10",
-    "@rsbuild/plugin-swc": "0.7.10",
+    "@rsbuild/core": "1.0.1-beta.2",
+    "@rsbuild/plugin-swc": "1.0.1-beta.2",
     "@modern-js/utils": "workspace:*",
     "@swc/helpers": "0.5.3"
   },

diff --git a/packages/cli/rsbuild-plugin-esbuild/package.json b/packages/cli/rsbuild-plugin-esbuild/package.json
@@ -28,12 +28,12 @@
   "dependencies": {
     "@swc/helpers": "0.5.3",
     "esbuild": "0.17.19",
-    "webpack": "^5.92.0"
+    "webpack": "^5.93.0"
   },
   "devDependencies": {
     "@scripts/build": "workspace:*",
-    "@rsbuild/core": "0.7.10",
-    "@rsbuild/webpack": "0.7.10",
+    "@rsbuild/core": "1.0.1-beta.2",
+    "@rsbuild/webpack": "1.0.1-beta.2",
     "typescript": "^5.4.2"
   },
   "publishConfig": {

diff --git a/packages/cli/rsbuild-plugin-esbuild/src/index.ts b/packages/cli/rsbuild-plugin-esbuild/src/index.ts
@@ -3,7 +3,7 @@ import type {
   RsbuildPlugin,
   RspackChain,
   RsbuildContext,
-  NormalizedConfig,
+  NormalizedEnvironmentConfig,
 } from '@rsbuild/core';
 import type {
   LoaderOptions,
@@ -30,7 +30,7 @@ function applyScriptCondition({
 }: {
   rule: RspackChain.Rule;
   chain: RspackChain;
-  config: NormalizedConfig;
+  config: NormalizedEnvironmentConfig;
   context: RsbuildContext;
   includes: (string | RegExp)[];
   excludes: (string | RegExp)[];
@@ -74,91 +74,92 @@ export function pluginEsbuild(
     name: 'modernjs:esbuild',
 
     setup(api) {
-      api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd, target }) => {
-        const rsbuildConfig = api.getNormalizedConfig();
-        const esbuildLoaderPath = path.join(
-          __dirname,
-          '../compiled/esbuild-loader/index.js',
-        );
-
-        const options: PluginEsbuildOptions = {
-          loader: {
-            target: 'es2015',
-            charset: rsbuildConfig.output.charset,
-          },
-          minimize: {
-            css: true,
-            target: 'es2015',
-            format: target === 'web' ? 'iife' : undefined,
-          },
-          ...userOptions,
-        };
-
-        if (options.loader !== false) {
-          // remove babel-loader and ts-loader
-          chain.module.rule(CHAIN_ID.RULE.JS).uses.delete(CHAIN_ID.USE.BABEL);
-          chain.module
-            .rule(CHAIN_ID.RULE.TS)
-            .uses.delete(CHAIN_ID.USE.BABEL)
-            .delete(CHAIN_ID.USE.TS);
-
-          // add esbuild-loader
-          chain.module
-            .rule(CHAIN_ID.RULE.JS)
-            .test(JS_REGEX)
-            .use('esbuild')
-            .loader(esbuildLoaderPath)
-            .options({
-              loader: 'jsx',
-              ...options?.loader,
-            });
+      api.modifyBundlerChain(
+        async (chain, { CHAIN_ID, isProd, target, environment }) => {
+          const rsbuildConfig = environment.config;
+          const esbuildLoaderPath = path.join(
+            __dirname,
+            '../compiled/esbuild-loader/index.js',
+          );
 
-          const rule = chain.module.rule(CHAIN_ID.RULE.TS);
-          rule
-            .test(TS_REGEX)
-            .use('esbuild')
-            .loader(esbuildLoaderPath)
-            .options({
-              loader: 'tsx',
-              ...options?.loader,
+          const options: PluginEsbuildOptions = {
+            loader: {
+              target: 'es2015',
+              charset: rsbuildConfig.output.charset,
+            },
+            minimize: {
+              css: true,
+              target: 'es2015',
+              format: target === 'web' ? 'iife' : undefined,
+            },
+            ...userOptions,
+          };
+
+          if (options.loader !== false) {
+            // remove babel-loader and ts-loader
+            chain.module.rule(CHAIN_ID.RULE.JS).uses.delete(CHAIN_ID.USE.BABEL);
+            chain.module
+              .rule(CHAIN_ID.RULE.TS)
+              .uses.delete(CHAIN_ID.USE.BABEL)
+              .delete(CHAIN_ID.USE.TS);
+
+            // add esbuild-loader
+            chain.module
+              .rule(CHAIN_ID.RULE.JS)
+              .test(JS_REGEX)
+              .use('esbuild')
+              .loader(esbuildLoaderPath)
+              .options({
+                loader: 'jsx',
+                ...options?.loader,
+              });
+
+            const rule = chain.module.rule(CHAIN_ID.RULE.TS);
+            rule
+              .test(TS_REGEX)
+              .use('esbuild')
+              .loader(esbuildLoaderPath)
+              .options({
+                loader: 'tsx',
+                ...options?.loader,
+              });
+            applyScriptCondition({
+              chain,
+              rule,
+              config: rsbuildConfig,
+              context: api.context,
+              includes: [],
+              excludes: [],
             });
-          applyScriptCondition({
-            chain,
-            rule,
-            config: rsbuildConfig,
-            context: api.context,
-            includes: [],
-            excludes: [],
-          });
-        }
-
-        if (isProd && options.minimize !== false) {
-          const { ESBuildMinifyPlugin } = await import(
-            '../compiled/esbuild-loader'
-          );
+          }
 
-          // @ts-expect-error webpack-chain missing minimizers type
-          chain.optimization.minimizers
-            .delete(CHAIN_ID.MINIMIZER.JS)
-            .delete(CHAIN_ID.MINIMIZER.CSS);
-
-          chain.optimization
-            .minimizer('js-css')
-            .use(ESBuildMinifyPlugin)
-            .init(
-              () =>
-                new ESBuildMinifyPlugin({
-                  // other legalComments such as linked is not supported yet
-                  // https://github.com/privatenumber/esbuild-loader/issues/263
-                  legalComments:
-                    rsbuildConfig.output?.legalComments === 'none'
-                      ? 'none'
-                      : 'inline',
-                  ...options?.minimize,
-                }),
+          if (isProd && options.minimize !== false) {
+            const { ESBuildMinifyPlugin } = await import(
+              '../compiled/esbuild-loader'
             );
-        }
-      });
+
+            chain.optimization.minimizers
+              .delete(CHAIN_ID.MINIMIZER.JS)
+              .delete(CHAIN_ID.MINIMIZER.CSS);
+
+            chain.optimization
+              .minimizer('js-css')
+              .use(ESBuildMinifyPlugin)
+              .init(
+                () =>
+                  new ESBuildMinifyPlugin({
+                    // other legalComments such as linked is not supported yet
+                    // https://github.com/privatenumber/esbuild-loader/issues/263
+                    legalComments:
+                      rsbuildConfig.output?.legalComments === 'none'
+                        ? 'none'
+                        : 'inline',
+                    ...options?.minimize,
+                  }),
+              );
+          }
+        },
+      );
     },
   };
 }
diff --git a/packages/cli/uni-builder/package.json b/packages/cli/uni-builder/package.json
@@ -36,25 +36,24 @@
     "@modern-js/prod-server": "workspace:*",
     "@modern-js/babel-preset": "workspace:*",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
-    "@rsbuild/core": "0.7.10",
-    "@rsbuild/plugin-sass": "0.7.10",
-    "@rsbuild/plugin-less": "0.7.10",
-    "@rsbuild/plugin-assets-retry": "0.7.10",
-    "@rsbuild/plugin-babel": "0.7.10",
-    "@rsbuild/plugin-check-syntax": "0.7.10",
-    "@rsbuild/plugin-css-minimizer": "0.7.10",
-    "@rsbuild/plugin-pug": "0.7.10",
-    "@rsbuild/plugin-react": "0.7.10",
-    "@rsbuild/plugin-rem": "0.7.10",
-    "@rsbuild/plugin-source-build": "0.7.10",
-    "@rsbuild/plugin-styled-components": "0.7.10",
-    "@rsbuild/plugin-svgr": "0.7.10",
-    "@rsbuild/plugin-type-check": "0.7.10",
-    "@rsbuild/plugin-typed-css-modules": "0.7.10",
-    "@rsbuild/plugin-toml": "0.7.10",
-    "@rsbuild/plugin-yaml": "0.7.10",
-    "@rsbuild/shared": "0.7.10",
-    "@rsbuild/webpack": "0.7.10",
+    "@rsbuild/core": "1.0.1-beta.2",
+    "@rsbuild/plugin-sass": "1.0.1-beta.2",
+    "@rsbuild/plugin-less": "1.0.1-beta.2",
+    "@rsbuild/plugin-assets-retry": "1.0.1-beta.2",
+    "@rsbuild/plugin-babel": "1.0.1-beta.2",
+    "@rsbuild/plugin-check-syntax": "1.0.1-beta.2",
+    "@rsbuild/plugin-css-minimizer": "1.0.1",
+    "@rsbuild/plugin-pug": "1.0.1",
+    "@rsbuild/plugin-react": "1.0.1-beta.2",
+    "@rsbuild/plugin-rem": "1.0.1-beta.2",
+    "@rsbuild/plugin-source-build": "1.0.1-beta.2",
+    "@rsbuild/plugin-styled-components": "1.0.1-beta.2",
+    "@rsbuild/plugin-svgr": "1.0.1-beta.2",
+    "@rsbuild/plugin-type-check": "1.0.1-beta.2",
+    "@rsbuild/plugin-typed-css-modules": "1.0.1",
+    "@rsbuild/plugin-toml": "1.0.0",
+    "@rsbuild/plugin-yaml": "1.0.1",
+    "@rsbuild/webpack": "1.0.1-beta.2",
     "@swc/helpers": "0.5.3",
     "babel-loader": "9.1.3",
     "babel-plugin-import": "1.13.5",
@@ -64,6 +63,7 @@
     "cssnano": "6.0.1",
     "glob": "^9.3.5",
     "html-webpack-plugin": "5.5.3",
+    "html-minifier-terser": "^7.2.0",
     "lodash": "^4.17.21",
     "postcss": "^8.4.35",
     "postcss-custom-properties": "13.1.5",
@@ -79,16 +79,18 @@
     "terser-webpack-plugin": "5.3.10",
     "ts-deepmerge": "7.0.0",
     "ts-loader": "9.4.4",
-    "webpack": "^5.92.0",
+    "webpack": "^5.93.0",
     "webpack-subresource-integrity": "5.1.0"
   },
   "devDependencies": {
-    "@rsbuild/plugin-swc": "0.7.10",
+    "@rsbuild/plugin-swc": "1.0.1-beta.2",
     "@scripts/build": "workspace:*",
     "@scripts/vitest-config": "workspace:*",
+    "@types/html-minifier-terser": "^7.0.2",
     "@types/lodash": "^4.14.202",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "terser": "^5.31.1",
     "typescript": "^5.3.0"
   },
   "publishConfig": {

diff --git a/packages/cli/uni-builder/src/index.ts b/packages/cli/uni-builder/src/index.ts
@@ -13,7 +13,7 @@ export type {
   UniBuilderInstance,
   UniBuilderWebpackInstance,
 };
-export type { CacheGroup } from '@rsbuild/shared';
+
 export type {
   UniBuilderConfig,
   UniBuilderPlugin,
@@ -42,6 +42,12 @@ export {
   type RsbuildConfig,
   type RsbuildTarget,
   type NormalizedConfig,
+  type CacheGroup,
 } from '@rsbuild/core';
 export type { webpack, WebpackConfig } from '@rsbuild/webpack';
-export { RUNTIME_CHUNK_NAME, isHtmlDisabled, castArray } from './shared/utils';
+export {
+  RUNTIME_CHUNK_NAME,
+  SERVICE_WORKER_ENVIRONMENT_NAME,
+  isHtmlDisabled,
+  castArray,
+} from './shared/utils';
diff --git a/packages/cli/uni-builder/src/rspack/index.ts b/packages/cli/uni-builder/src/rspack/index.ts
@@ -13,6 +13,7 @@ import type {
 import { parseCommonConfig } from '../shared/parseCommonConfig';
 import { compatLegacyPlugin } from '../shared/compatLegacyPlugin';
 import type { StartDevServerOptions } from '../shared/devServer';
+import { SERVICE_WORKER_ENVIRONMENT_NAME } from '../shared/utils';
 
 export async function parseConfig(
   uniBuilderConfig: UniBuilderConfig,
@@ -46,9 +47,11 @@ export async function parseConfig(
     const { pluginStyledComponents } = await import(
       '@rsbuild/plugin-styled-components'
     );
-    rsbuildPlugins.push(
-      pluginStyledComponents(uniBuilderConfig.tools?.styledComponents),
-    );
+    const options = uniBuilderConfig.tools?.styledComponents || {};
+    if (uniBuilderConfig.environments?.[SERVICE_WORKER_ENVIRONMENT_NAME]) {
+      options.ssr = true;
+    }
+    rsbuildPlugins.push(pluginStyledComponents(options));
   }
 
   return {

diff --git a/packages/cli/uni-builder/src/rspack/plugins/babel-post.ts b/packages/cli/uni-builder/src/rspack/plugins/babel-post.ts
@@ -10,14 +10,14 @@ export const pluginBabelPost = (): RsbuildPlugin => ({
 
   setup(api) {
     api.modifyBundlerChain({
-      handler: async (chain, { CHAIN_ID }) => {
+      handler: async (chain, { CHAIN_ID, environment }) => {
         if (chain.module.rules.get(CHAIN_ID.RULE.JS)) {
           const { cacheIdentifier, ...babelLoaderOptions } = chain.module
             .rule(CHAIN_ID.RULE.JS)
             .use(CHAIN_ID.USE.BABEL)
             .get('options');
 
-          const config = api.getNormalizedConfig();
+          const { config } = environment;
 
           if (
             babelLoaderOptions &&