feat: support applymore environment configs

web-infra-dev · Jun 21, 2024 · e5c5c56 · e5c5c56
1 parent 6009601
commit e5c5c56
Show file tree

Hide file tree

Showing 19 changed files with 208 additions and 187 deletions.
diff --git a/packages/compat/webpack/src/plugin.ts b/packages/compat/webpack/src/plugin.ts
@@ -61,8 +61,8 @@ export const pluginAdaptor = (): RsbuildPlugin => ({
   name: 'rsbuild-webpack:adaptor',
 
   setup(api) {
-    api.modifyBundlerChain(async (chain, { CHAIN_ID, target }) => {
-      const config = api.getNormalizedConfig();
+    api.modifyBundlerChain(async (chain, { CHAIN_ID, environment, target }) => {
+      const config = api.getNormalizedConfig({ environment });
 
       if (
         api.context.tsconfigPath &&

diff --git a/packages/core/src/plugins/basic.ts b/packages/core/src/plugins/basic.ts
@@ -1,8 +1,8 @@
 import path from 'node:path';
 import { isProd } from '../helpers';
-import type { NormalizedConfig, RsbuildPlugin } from '../types';
+import type { NormalizedEnvironmentConfig, RsbuildPlugin } from '../types';
 
-const getJsSourceMap = (config: NormalizedConfig) => {
+const getJsSourceMap = (config: NormalizedEnvironmentConfig) => {
   const { sourceMap } = config.output;
   if (sourceMap.js === undefined) {
     return isProd() ? false : 'cheap-module-source-map';
@@ -19,7 +19,7 @@ export const pluginBasic = (): RsbuildPlugin => ({
   setup(api) {
     api.modifyBundlerChain(
       (chain, { env, isProd, target, bundler, environment, CHAIN_ID }) => {
-        const config = api.getNormalizedConfig();
+        const config = api.getNormalizedConfig({ environment });
 
         chain.name(environment);
 

diff --git a/packages/core/src/plugins/css.ts b/packages/core/src/plugins/css.ts
@@ -18,19 +18,16 @@ import { CSS_REGEX, LOADER_PATH } from '../constants';
 import { getCompiledPath } from '../helpers';
 import { getCssExtractPlugin } from '../pluginHelper';
 import { reduceConfigs, reduceConfigsWithContext } from '../reduceConfigs';
-import type { NormalizedConfig, RsbuildPlugin } from '../types';
-
-export const enableNativeCss = (config: NormalizedConfig) =>
-  !config.output.injectStyles;
+import type { NormalizedEnvironmentConfig, RsbuildPlugin } from '../types';
 
 export const isUseCssExtract = (
-  config: NormalizedConfig,
+  config: NormalizedEnvironmentConfig,
   target: RsbuildTarget,
 ) =>
   !config.output.injectStyles && target !== 'node' && target !== 'web-worker';
 
 const getCSSModulesLocalIdentName = (
-  config: NormalizedConfig,
+  config: NormalizedEnvironmentConfig,
   isProd: boolean,
 ) =>
   config.output.cssModules.localIdentName ||
@@ -111,7 +108,7 @@ async function loadUserPostcssrc(root: string): Promise<PostCSSOptions> {
 export const applyAutoprefixer = async (
   plugins: unknown[],
   browserslist: string[],
-  config: NormalizedConfig,
+  config: NormalizedEnvironmentConfig,
 ) => {
   const pluginObjects: AcceptedPlugin[] = plugins.map((plugin) =>
     isFunction(plugin) ? plugin({}) : plugin,
@@ -151,7 +148,7 @@ const getPostcssLoaderOptions = async ({
   root,
 }: {
   browserslist: string[];
-  config: NormalizedConfig;
+  config: NormalizedEnvironmentConfig;
   root: string;
 }): Promise<PostCSSLoaderOptions> => {
   const extraPlugins: AcceptedPlugin[] = [];
@@ -207,7 +204,7 @@ const getCSSLoaderOptions = ({
   target,
   localIdentName,
 }: {
-  config: NormalizedConfig;
+  config: NormalizedEnvironmentConfig;
   importLoaders: number;
   target: RsbuildTarget;
   localIdentName: string;
@@ -245,7 +242,7 @@ async function applyCSSRule({
   importLoaders = 1,
 }: {
   rule: RspackChain.Rule;
-  config: NormalizedConfig;
+  config: NormalizedEnvironmentConfig;
   context: RsbuildContext;
   utils: ModifyChainUtils;
   importLoaders?: number;
@@ -331,7 +328,9 @@ export const pluginCss = (): RsbuildPlugin => ({
       order: 'pre',
       handler: async (chain, utils) => {
         const rule = chain.module.rule(utils.CHAIN_ID.RULE.CSS);
-        const config = api.getNormalizedConfig();
+        const config = api.getNormalizedConfig({
+          environment: utils.environment,
+        });
         rule.test(CSS_REGEX);
         await applyCSSRule({
           rule,

diff --git a/packages/core/src/plugins/resolve.ts b/packages/core/src/plugins/resolve.ts
@@ -103,9 +103,9 @@ export const pluginResolve = (): RsbuildPlugin => ({
       },
     });
 
-    api.modifyRspackConfig(async (rspackConfig) => {
+    api.modifyRspackConfig(async (rspackConfig, { environment }) => {
       const isTsProject = Boolean(api.context.tsconfigPath);
-      const config = api.getNormalizedConfig();
+      const config = api.getNormalizedConfig({ environment });
 
       rspackConfig.resolve ||= {};
 

diff --git a/packages/core/src/plugins/splitChunks.ts b/packages/core/src/plugins/splitChunks.ts
@@ -228,7 +228,10 @@ export const pluginSplitChunks = (): RsbuildPlugin => ({
   name: 'rsbuild:split-chunks',
   setup(api) {
     api.modifyBundlerChain(
-      async (chain, { isServer, isWebWorker, isServiceWorker }) => {
+      async (
+        chain,
+        { environment, isServer, isWebWorker, isServiceWorker },
+      ) => {
         if (isServer || isWebWorker || isServiceWorker) {
           chain.optimization.splitChunks(false);
 
@@ -244,7 +247,7 @@ export const pluginSplitChunks = (): RsbuildPlugin => ({
           return;
         }
 
-        const config = api.getNormalizedConfig();
+        const config = api.getNormalizedConfig({ environment });
         const defaultConfig: Exclude<SplitChunks, false> = {
           // Optimize both `initial` and `async` chunks
           chunks: 'all',

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -150,4 +150,5 @@ export type {
   NormalizedSecurityConfig,
   NormalizedPerformanceConfig,
   NormalizedModuleFederationConfig,
+  NormalizedEnvironmentConfig,
 } from '@rsbuild/shared';
diff --git a/packages/plugin-css-minimizer/src/index.ts b/packages/plugin-css-minimizer/src/index.ts
@@ -66,8 +66,8 @@ export const pluginCssMinimizer = (
   name: PLUGIN_CSS_MINIMIZER_NAME,
 
   setup(api) {
-    api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd }) => {
-      const config = api.getNormalizedConfig();
+    api.modifyBundlerChain(async (chain, { CHAIN_ID, environment, isProd }) => {
+      const config = api.getNormalizedConfig({ environment });
       const { minify } = config.output;
 
       if (

diff --git a/packages/plugin-less/src/index.ts b/packages/plugin-less/src/index.ts
@@ -109,8 +109,8 @@ export const pluginLess = (
   name: PLUGIN_LESS_NAME,
 
   setup(api) {
-    api.modifyBundlerChain(async (chain, { CHAIN_ID }) => {
-      const config = api.getNormalizedConfig();
+    api.modifyBundlerChain(async (chain, { CHAIN_ID, environment }) => {
+      const config = api.getNormalizedConfig({ environment });
       const rule = chain.module
         .rule(CHAIN_ID.RULE.LESS)
         .test(/\.less$/)

diff --git a/packages/plugin-lightningcss/src/plugin.ts b/packages/plugin-lightningcss/src/plugin.ts
@@ -178,8 +178,8 @@ export const pluginLightningcss = (
       },
     });
 
-    api.modifyBundlerChain(async (chain, { CHAIN_ID, isProd }) => {
-      const config = api.getNormalizedConfig();
+    api.modifyBundlerChain(async (chain, { CHAIN_ID, environment, isProd }) => {
+      const config = api.getNormalizedConfig({ environment });
       const { minify } = config.output;
       const isMinimize =
         isProd &&

diff --git a/packages/plugin-react/src/react.ts b/packages/plugin-react/src/react.ts
@@ -36,56 +36,61 @@ export const applyBasicReactSupport = (
 ) => {
   const REACT_REFRESH_PATH = require.resolve('react-refresh');
 
-  api.modifyBundlerChain(async (chain, { CHAIN_ID, isDev, isProd, target }) => {
-    const config = api.getNormalizedConfig();
-    const usingHMR = !isProd && config.dev.hmr && target === 'web';
-    const reactOptions: Rspack.SwcLoaderTransformConfig['react'] = {
-      development: isDev,
-      refresh: usingHMR,
-      runtime: 'automatic',
-      ...options.swcReactOptions,
-    };
+  api.modifyBundlerChain(
+    async (chain, { CHAIN_ID, environment, isDev, isProd, target }) => {
+      const config = api.getNormalizedConfig({ environment });
+      const usingHMR = !isProd && config.dev.hmr && target === 'web';
+      const reactOptions: Rspack.SwcLoaderTransformConfig['react'] = {
+        development: isDev,
+        refresh: usingHMR,
+        runtime: 'automatic',
+        ...options.swcReactOptions,
+      };
 
-    modifySwcLoaderOptions({
-      chain,
-      CHAIN_ID,
-      modifier: (opts) => {
-        const extraOptions: Rspack.SwcLoaderOptions = {
-          jsc: {
-            parser: {
-              syntax: 'typescript',
-              // enable supports for React JSX/TSX compilation
-              tsx: true,
-            },
-            transform: {
-              react: reactOptions,
+      modifySwcLoaderOptions({
+        chain,
+        CHAIN_ID,
+        modifier: (opts) => {
+          const extraOptions: Rspack.SwcLoaderOptions = {
+            jsc: {
+              parser: {
+                syntax: 'typescript',
+                // enable supports for React JSX/TSX compilation
+                tsx: true,
+              },
+              transform: {
+                react: reactOptions,
+              },
             },
-          },
-        };
+          };
 
-        return deepmerge(opts, extraOptions);
-      },
-    });
+          return deepmerge(opts, extraOptions);
+        },
+      });
 
-    if (!usingHMR) {
-      return;
-    }
+      if (!usingHMR) {
+        return;
+      }
 
-    chain.resolve.alias.set('react-refresh', path.dirname(REACT_REFRESH_PATH));
+      chain.resolve.alias.set(
+        'react-refresh',
+        path.dirname(REACT_REFRESH_PATH),
+      );
 
-    const { default: ReactRefreshRspackPlugin } = await import(
-      '@rspack/plugin-react-refresh'
-    );
+      const { default: ReactRefreshRspackPlugin } = await import(
+        '@rspack/plugin-react-refresh'
+      );
 
-    chain
-      .plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH)
-      .use(ReactRefreshRspackPlugin, [
-        {
-          include: [SCRIPT_REGEX],
-          ...options.reactRefreshOptions,
-        },
-      ]);
-  });
+      chain
+        .plugin(CHAIN_ID.PLUGIN.REACT_FAST_REFRESH)
+        .use(ReactRefreshRspackPlugin, [
+          {
+            include: [SCRIPT_REGEX],
+            ...options.reactRefreshOptions,
+          },
+        ]);
+    },
+  );
 };
 
 export const applyReactProfiler = (api: RsbuildPluginAPI) => {

diff --git a/packages/plugin-react/src/splitChunks.ts b/packages/plugin-react/src/splitChunks.ts
@@ -9,8 +9,8 @@ export const applySplitChunksRule = (
     router: true,
   },
 ) => {
-  api.modifyBundlerChain((chain) => {
-    const config = api.getNormalizedConfig();
+  api.modifyBundlerChain((chain, { environment }) => {
+    const config = api.getNormalizedConfig({ environment });
     if (config.performance.chunkSplit.strategy !== 'split-by-experience') {
       return;
     }

diff --git a/packages/plugin-rem/src/index.ts b/packages/plugin-rem/src/index.ts
@@ -46,28 +46,30 @@ export const pluginRem = (options: PluginRemOptions = {}): RsbuildPlugin => ({
       });
     });
 
-    api.modifyBundlerChain(async (chain, { target, CHAIN_ID, HtmlPlugin }) => {
-      if (target !== 'web' || !userOptions.enableRuntime) {
-        return;
-      }
+    api.modifyBundlerChain(
+      async (chain, { target, CHAIN_ID, environment, HtmlPlugin }) => {
+        if (target !== 'web' || !userOptions.enableRuntime) {
+          return;
+        }
 
-      const { AutoSetRootFontSizePlugin } = await import(
-        './AutoSetRootFontSizePlugin'
-      );
+        const { AutoSetRootFontSizePlugin } = await import(
+          './AutoSetRootFontSizePlugin'
+        );
 
-      const entries = Object.keys(chain.entryPoints.entries() || {});
-      const config = api.getNormalizedConfig();
-      const distDir = config.output.distPath.js;
+        const entries = Object.keys(chain.entryPoints.entries() || {});
+        const config = api.getNormalizedConfig({ environment });
+        const distDir = config.output.distPath.js;
 
-      chain
-        .plugin(CHAIN_ID.PLUGIN.AUTO_SET_ROOT_SIZE)
-        .use(AutoSetRootFontSizePlugin, [
-          userOptions,
-          entries,
-          HtmlPlugin,
-          distDir,
-          config.html.scriptLoading,
-        ]);
-    });
+        chain
+          .plugin(CHAIN_ID.PLUGIN.AUTO_SET_ROOT_SIZE)
+          .use(AutoSetRootFontSizePlugin, [
+            userOptions,
+            entries,
+            HtmlPlugin,
+            distDir,
+            config.html.scriptLoading,
+          ]);
+      },
+    );
   },
 });