feat: align rsbuild config

Author: keepview

.changeset/five-ghosts-care.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/utils': patch
+'@modern-js/builder': patch
+---
+
+feat: align rsbuild config
+feat: 对齐 rsbuild 配置

packages/cli/builder/src/shared/parseCommonConfig.ts

@@ -166,10 +166,7 @@ export async function parseCommonConfig(
 
   html.title ??= '';
 
-  html.appIcon =
-    typeof appIcon === 'string'
-      ? { icons: [{ src: appIcon, size: 180 }] }
-      : appIcon;
+  html.appIcon = appIcon;
 
   extraConfig.tools ??= {};
 

packages/cli/builder/src/shared/utils.ts

@@ -119,11 +119,16 @@ export const isHtmlDisabled = (
   );
 };
 
-const DEFAULT_WEB_BROWSERSLIST = ['> 0.01%', 'not dead', 'not op_mini all'];
+const DEFAULT_WEB_BROWSERSLIST = [
+  'chrome >= 87',
+  'edge >= 88',
+  'firefox >= 78',
+  'safari >= 14',
+];
 
 const DEFAULT_BROWSERSLIST: Record<RsbuildTarget, string[]> = {
   web: DEFAULT_WEB_BROWSERSLIST,
-  node: ['node >= 14'],
+  node: ['node >= 16'],
   'web-worker': DEFAULT_WEB_BROWSERSLIST,
 };
 

packages/cli/builder/src/types.ts

@@ -206,7 +206,7 @@ export type BuilderExtraConfig = {
     disableSvgr?: boolean;
   };
   html?: {
-    appIcon?: string | HtmlConfig['appIcon'];
+    appIcon?: HtmlConfig['appIcon'];
     // TODO: need support rsbuild favicon type in server/utils
     favicon?: string;
   };

packages/document/main-doc/docs/en/components/upgrade-browserslist.mdx

@@ -13,7 +13,7 @@ type AppIconItem = {
   target?: 'apple-touch-icon' | 'web-app-manifest';
 };
 
-type AppIcon = string | {
+type AppIcon = {
   name?: string;
   icons: AppIconItem[];
   filename?: string;
@@ -27,28 +27,6 @@ Set the web application icons to display when added to the home screen of a mobi
 - Generate the web app manifest file and its `icons` field.
 - Generate the `apple-touch-icon` and `manifest` tags in the HTML file.
 
-### AppIcon string
-
-The `appIcon` configuration of type `string` is a syntactic sugar for the `object` type.
-
-```js
-export default {
-  html: {
-    appIcon: './src/assets/icon.png',
-  },
-};
-```
-
-The above configuration is equivalent to the following configuration:
-
-```js
-export default {
-  html: {
-    appIcon: { icons: [{ src: './src/assets/icon.png', size: 180 }] }
-  },
-};
-```
-
 import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 
 <RsbuildConfig configName="html.appIcon" />

packages/document/main-doc/docs/en/configure/app/html/app-icon.mdx

@@ -20,7 +20,7 @@ type InlineScripts =
     };
 ```
 
-- **Default:** `false`
+- **Default:** `/builder-runtime([.].+)?\.js$/`
 
 Whether to inline output scripts files (.js files) into HTML with `<script>` tags.
 

packages/document/main-doc/docs/en/configure/app/output/inline-scripts.mdx

@@ -9,15 +9,17 @@ title: overrideBrowserslist
 
 ```ts
 const defaultBrowserListMap: Record<RsbuildTarget, string[]> = {
-  web: ['> 0.01%', 'not dead', 'not op_mini all'],
+  web: ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'],
   node: ['node >= 14'],
-  'web-worker': ['> 0.01%', 'not dead', 'not op_mini all'],
+  'web-worker': ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'],
 };
 ```
 
-Modern.js will give priority to using the configuration in the `.browserslistrc` file in the project root directory.
+Specifies the range of target browsers that the project is compatible with.
 
-Specifies the range of target browsers that the project is compatible with. This value will be used by [SWC](https://github.com/swc-project/swc) and [autoprefixer](https://github.com/postcss/autoprefixer) to identify the JavaScript syntax that need to be transformed and the CSS browser prefixes that need to be added.
+This value will be used by [SWC](https://github.com/swc-project/swc) and [autoprefixer](https://github.com/postcss/autoprefixer) to identify the JavaScript syntax that need to be transformed and the CSS browser prefixes that need to be added.
+
+For other configuration methods and configuration priorities, please refer to the [Browserslist configuration](/guides/advanced-features/compatibility.html).
 
 import RsbuildConfig from '@site-docs-en/components/rsbuild-config-tooltip';
 

packages/document/main-doc/docs/en/configure/app/output/override-browserslist.mdx

@@ -1,14 +1,18 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Browser Compatibility
 
 ## Browserslist Configuration
 
-Modern.js supports setting the browserslist for your web applications. You can set the value of [Browserslist](https://browsersl.ist/) in the `.browserslistrc` file.
+Modern.js supports three ways to set the range of browsers that a web application needs to support.
 
-When you create a new Modern.js project, it will includes a `.browserslistrc` configuration by default, which means that the JavaScript code will be compiled to ES6.
+### Method 1: Configure via `.browserslistrc` File
+
+Modern.js supports setting the range of browsers that a web application needs to support. You can set the [Browserslist](https://browsersl.ist/) values in the `.browserslistrc` file.
+
+When you create a new Modern.js project, a default `.browserslistrc` configuration is included, which indicates that JavaScript code will be compiled to ES6 format.
 
 ```yaml title=".browserslistrc"
 chrome >= 51
@@ -18,23 +22,63 @@ safari >= 10
 ios_saf >= 10
 ```
 
+When the `overrideBrowserslist` configuration is not specified in the project, this `.browserslistrc` file will take effect.
+
+### Method 2: Configure via package.json
+
+You can also configure browserslist by setting the `browserslist` field in the `package.json` file:
+
+```json title="package.json"
+{
+  "browserslist": [
+    "chrome >= 51"
+    // Other browser configurations...
+  ]
+}
+```
+
+### Method 3: Configure via `output.overrideBrowserslist`
+
+You can also configure browserslist by setting the [`output.overrideBrowserslist`](/configure/app/output/override-browserslist) field in the `modern.config.js` file:
+
+```js title="modern.config.js"
+export default {
+  output: {
+    overrideBrowserslist: [
+      'chrome >= 51',
+      // Other browser configurations...
+    ],
+  },
+};
+```
+
+### Configuration Priority
+
+The `overrideBrowserslist` configuration has a higher priority than the `.browserslistrc` file and the `browserslist` field in package.json.
+
+In most scenarios, it is recommended to prioritize using the `.browserslistrc` file rather than the `overrideBrowserslist` configuration because the `.browserslistrc` file is the officially defined configuration file, has better general applicability, and can be recognized by other libraries in the community.
+
 :::tip
-Please refer to [Rsbuild - Browserslist](https://rsbuild.rs/guide/advanced/browserslist) for more information.
+Please refer to [Rsbuild - Setting Browser Range](https://rsbuild.rs/zh/guide/advanced/browserslist) for more information.
 :::
 
+import UpgradeBrowserslist from '@site-docs-en/components/upgrade-browserslist';
+
+<UpgradeBrowserslist />
+
 ## Polyfill
 
-### Polyfill At Compile
+### Compile-time Polyfill
 
-Modern.js defaults to importing corresponding polyfill code from [core-js](https://github.com/zloirock/core-js) during compilation.
+Modern.js by default injects corresponding polyfill code at compile time through [core-js](https://github.com/zloirock/core-js).
 
-By default, the required Polyfill code will be introduced according to the settings of the Browserslist, so there is no need to worry about the Polyfill problem of the project source code and third-party dependencies, but because it contains some Polyfill code that is not used, the final bundle size may be increased.
+By default, it will include the necessary polyfill code based on the project's Browserslist settings, so you generally do not need to worry about polyfill issues for your project source code and third-party dependencies. However, since some unused polyfill code is included, the final bundle size may increase.
 
 :::info
-For case where Polyfill is not required for third-party dependencies, you can set ['output.polyfill'](/configure/app/output/polyfill) to `usage`, so that Babel compiles only Polyfill code based on the syntax used in the code.
+For scenarios where certain third-party dependencies clearly do not require polyfills, you can set [`output.polyfill`](/configure/app/output/polyfill) to `usage`. This way, Babel will only inject polyfill code based on the syntax used in the code during compilation.
 
 :::
 
-import UAPolyfill from '@site-docs-en/components/ua-polyfill';
+import UAPolyfill from '@site-docs/components/ua-polyfill';
 
 <UAPolyfill />

packages/document/main-doc/docs/en/guides/advanced-features/compatibility.mdx

@@ -46,20 +46,20 @@ See the [performance.bundleAnalyze](/configure/app/performance/bundle-analyze.ht
 
 Modern.js will compile the code according to the project's Browserslist config, and inject some Polyfills. If the project does not need to be compatible with legacy browsers, you can adjust the Browserslist and drop some legacy browsers, thereby reducing the compilation overhead on syntax and polyfill.
 
-Modern.js's default Browserslist config is:
+Modern.js's default [`output.overrideBrowserslist`](/configure/app/output/override-browserslist.html) config is:
 
 ```js
-['> 0.01%', 'not dead', 'not op_mini all'];
+['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];
 ```
 
-For example, if you only need to be compatible with browsers above Chrome 61, you can change it to:
+For example, if you only need to be compatible with browsers above Chrome 100, you can change it to:
 
 ```js
-['Chrome >= 61'];
+['Chrome >= 100'];
 ```
 
 :::tip
-Please read the [Browserslist](https://rsbuild.rs/guide/advanced/browserslist) chapter to know more about the usage of Browserslist.
+Please read the [Browserslist configuration](/guides/advanced-features/compatibility.html) chapter to know more about the usage of Browserslist.
 :::
 
 ## Usage polyfill