feat!: add browserslist to context.environments (#2646)

web-infra-dev · Jun 20, 2024 · a83891b · a83891b
1 parent 4ca4e53
commit a83891b
Show file tree

Hide file tree

Showing 17 changed files with 84 additions and 499 deletions.
diff --git a/packages/compat/plugin-swc/src/plugin.ts b/packages/compat/plugin-swc/src/plugin.ts
@@ -43,11 +43,13 @@ export const pluginSwc = (options: PluginSwcOptions = {}): RsbuildPlugin => ({
         const rsbuildConfig = api.getNormalizedConfig();
         const { rootPath } = api.context;
 
+        const { browserslist } = api.context.environments[utils.environment];
         const swcConfigs = await applyPluginConfig(
           options,
           utils,
           rsbuildConfig,
           rootPath,
+          browserslist,
         );
 
         // If babel plugin is used, replace babel-loader

diff --git a/packages/compat/plugin-swc/src/utils.ts b/packages/compat/plugin-swc/src/utils.ts
@@ -2,7 +2,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import { __internalHelper } from '@rsbuild/core';
 import type { ModifyChainUtils, NormalizedConfig } from '@rsbuild/core';
-import { getBrowserslistWithDefault, getCoreJsVersion } from '@rsbuild/shared';
+import { getCoreJsVersion } from '@rsbuild/shared';
 import _ from 'lodash';
 import semver from 'semver';
 import { CORE_JS_DIR, CORE_JS_PKG_PATH, SWC_HELPERS_DIR } from './constants';
@@ -176,6 +176,7 @@ export async function applyPluginConfig(
   utils: ModifyChainUtils,
   rsbuildConfig: NormalizedConfig,
   rootPath: string,
+  browserslist?: string[],
 ): Promise<FinalizedConfig[]> {
   const isUsingFnOptions = typeof rawOptions === 'function';
   const { target, isProd } = utils;
@@ -216,12 +217,8 @@ export async function applyPluginConfig(
   }
 
   // If `targets` is not specified manually, we get `browserslist` from project.
-  if (!swc.env.targets) {
-    swc.env.targets = await getBrowserslistWithDefault(
-      rootPath,
-      rsbuildConfig,
-      target,
-    );
+  if (!swc.env.targets && browserslist) {
+    swc.env.targets = browserslist;
   }
 
   const isSSR = target === 'node';

diff --git a/packages/core/src/createContext.ts b/packages/core/src/createContext.ts
@@ -1,8 +1,10 @@
 import { isAbsolute, join } from 'node:path';
-import type {
-  BundlerType,
-  NormalizedEnvironmentConfig,
-  RsbuildContext,
+import {
+  type BundlerType,
+  DEFAULT_BROWSERSLIST,
+  type NormalizedEnvironmentConfig,
+  type RsbuildContext,
+  getBrowserslist,
 } from '@rsbuild/shared';
 import { withDefaultConfig } from './config';
 import { ROOT_DIST_DIR } from './constants';
@@ -57,23 +59,51 @@ async function createContextByConfig(
   };
 }
 
-export function updateEnvironmentContext(
+export async function getBrowserslistByEnvironment(
+  path: string,
+  config: NormalizedEnvironmentConfig,
+): Promise<string[]> {
+  const { target, overrideBrowserslist } = config.output;
+
+  if (Array.isArray(overrideBrowserslist)) {
+    return overrideBrowserslist;
+  }
+
+  // Read project browserslist config when target is `web-like`
+  if (target === 'web' || target === 'web-worker') {
+    const browserslistrc = await getBrowserslist(path);
+    if (browserslistrc) {
+      return browserslistrc;
+    }
+  }
+
+  return DEFAULT_BROWSERSLIST[target];
+}
+
+export async function updateEnvironmentContext(
   context: RsbuildContext,
   configs: Record<string, NormalizedEnvironmentConfig>,
 ) {
-  context.environments = Object.fromEntries(
-    Object.entries(configs).map(([name, config]) => [
-      name,
-      {
-        target: config.output.target,
-        distPath: getAbsoluteDistPath(context.rootPath, config),
-        entry: getEntryObject(config, config.output.target),
-        tsconfigPath: config.source.tsconfigPath
-          ? getAbsolutePath(context.rootPath, config.source.tsconfigPath)
-          : undefined,
-      },
-    ]),
-  );
+  context.environments ||= {};
+
+  for (const [name, config] of Object.entries(configs)) {
+    const tsconfigPath = config.source.tsconfigPath
+      ? getAbsolutePath(context.rootPath, config.source.tsconfigPath)
+      : undefined;
+
+    const browserslist = await getBrowserslistByEnvironment(
+      context.rootPath,
+      config,
+    );
+
+    context.environments[name] = {
+      target: config.output.target,
+      distPath: getAbsoluteDistPath(context.rootPath, config),
+      entry: getEntryObject(config, config.output.target),
+      browserslist,
+      tsconfigPath,
+    };
+  }
 }
 
 export function updateContextByNormalizedConfig(

diff --git a/packages/core/src/mergeConfig.ts b/packages/core/src/mergeConfig.ts
@@ -12,6 +12,7 @@ const OVERRIDE_PATH = [
   'output.cssModules.auto',
   'output.targets',
   'output.emitAssets',
+  'output.overrideBrowserslist',
   'server.open',
   'server.printUrls',
   'provider',

diff --git a/packages/core/src/plugins/css.ts b/packages/core/src/plugins/css.ts
@@ -10,7 +10,6 @@ import {
   type RsbuildTarget,
   type RspackChain,
   deepmerge,
-  getBrowserslistWithDefault,
   isFunction,
   isPlainObject,
 } from '@rsbuild/shared';
@@ -242,7 +241,7 @@ async function applyCSSRule({
   rule,
   config,
   context,
-  utils: { target, isProd, CHAIN_ID },
+  utils: { target, isProd, CHAIN_ID, environment },
   importLoaders = 1,
 }: {
   rule: RspackChain.Rule;
@@ -251,11 +250,7 @@ async function applyCSSRule({
   utils: ModifyChainUtils;
   importLoaders?: number;
 }) {
-  const browserslist = await getBrowserslistWithDefault(
-    context.rootPath,
-    config,
-    target,
-  );
+  const { browserslist } = context.environments[environment];
 
   // 1. Check user config
   const enableExtractCSS = isUseCssExtract(config, target);

diff --git a/packages/core/src/plugins/swc.ts b/packages/core/src/plugins/swc.ts
@@ -1,12 +1,10 @@
 import path from 'node:path';
 import {
   type Polyfill,
-  type RsbuildTarget,
   SCRIPT_REGEX,
   applyScriptCondition,
   cloneDeep,
   deepmerge,
-  getBrowserslistWithDefault,
   getCoreJsVersion,
 } from '@rsbuild/shared';
 import type { SwcLoaderOptions } from '@rspack/core';
@@ -21,11 +19,7 @@ import type {
 
 const builtinSwcLoaderName = 'builtin:swc-loader';
 
-async function getDefaultSwcConfig(
-  config: NormalizedConfig,
-  rootPath: string,
-  target: RsbuildTarget,
-): Promise<SwcLoaderOptions> {
+function getDefaultSwcConfig(browserslist: string[]): SwcLoaderOptions {
   return {
     jsc: {
       externalHelpers: true,
@@ -40,7 +34,7 @@ async function getDefaultSwcConfig(
     },
     isModule: 'unknown',
     env: {
-      targets: await getBrowserslistWithDefault(rootPath, config, target),
+      targets: browserslist,
     },
   };
 }
@@ -59,7 +53,7 @@ export const pluginSwc = (): RsbuildPlugin => ({
 
     api.modifyBundlerChain({
       order: 'pre',
-      handler: async (chain, { CHAIN_ID, target }) => {
+      handler: async (chain, { CHAIN_ID, target, environment }) => {
         const config = api.getNormalizedConfig();
 
         const rule = chain.module
@@ -82,11 +76,9 @@ export const pluginSwc = (): RsbuildPlugin => ({
           excludes: [],
         });
 
-        const swcConfig = await getDefaultSwcConfig(
-          config,
-          api.context.rootPath,
-          target,
-        );
+        const { browserslist } = api.context.environments[environment];
+
+        const swcConfig = getDefaultSwcConfig(browserslist);
 
         applyTransformImport(swcConfig, config.source.transformImport);
         applySwcDecoratorConfig(swcConfig, config);

diff --git a/packages/core/src/plugins/target.ts b/packages/core/src/plugins/target.ts
@@ -1,7 +1,4 @@
-import {
-  browserslistToESVersion,
-  getBrowserslistWithDefault,
-} from '@rsbuild/shared';
+import { browserslistToESVersion } from '@rsbuild/shared';
 import type { RsbuildPlugin } from '../types';
 
 export const pluginTarget = (): RsbuildPlugin => ({
@@ -10,18 +7,13 @@ export const pluginTarget = (): RsbuildPlugin => ({
   setup(api) {
     api.modifyBundlerChain({
       order: 'pre',
-      handler: async (chain, { target }) => {
+      handler: async (chain, { target, environment }) => {
         if (target === 'node') {
           chain.target('node');
           return;
         }
 
-        const config = api.getNormalizedConfig();
-        const browserslist = await getBrowserslistWithDefault(
-          api.context.rootPath,
-          config,
-          target,
-        );
+        const { browserslist } = api.context.environments[environment];
         const esVersion = browserslistToESVersion(browserslist);
 
         if (target === 'web-worker' || target === 'service-worker') {

diff --git a/packages/core/src/provider/initConfigs.ts b/packages/core/src/provider/initConfigs.ts
@@ -97,7 +97,7 @@ export async function initRsbuildConfig({
 
   updateContextByNormalizedConfig(context, context.normalizedConfig);
 
-  updateEnvironmentContext(context, environments);
+  await updateEnvironmentContext(context, environments);
 
   // TODO: will remove soon
   context.targets = Object.values(environments).map((e) => e.output.target);