feat(mwa-generator): add a default browserslist config for new projects (#3695)

Author: chenjiahan

.changeset/old-swans-switch.md

@@ -0,0 +1,7 @@
+---
+'@modern-js/mwa-generator': patch
+---
+
+feat(mwa-generator): add a default browserslist config for new projects
+
+feat(mwa-generator): 为新项目增加默认的 browserslist 配置

packages/document/builder-doc/docs/en/guide/advanced/browserslist.md

@@ -38,7 +38,7 @@ Set via `browserslist` in `package.json`:
 
 Set via a separate `.browserslistrc` file:
 
-```
+```yaml
 iOS >= 9
 Android >= 4.4
 last 2 versions
@@ -101,11 +101,45 @@ In most cases, it is recommended to use the `.browserslistrc` file rather than t
 
 The following are some commonly used Browserslist, you can choose according to your project type.
 
-### Mobile H5 scene
+### Desktop PC scenario
+
+In the desktop PC scenario, if you need to be compatible with IE 11 browsers, you can set Browserslist to:
+
+```yaml
+> 0.5%
+not dead
+Internet Explorer 11
+```
+
+The above Browserslist will compile the code to the ES5 specification. For the specific browser list, please check [browserslist.dev](https://browserslist.dev/?q=PiAwLjUlLCBub3QgZGVhZCwgSUUgMTE%3D).
+
+If you don't need to be compatible with IE 11 browsers, you can adjust Browserslist to get a more performant output, such as:
 
-The mobile H5 scene is mainly compatible with `iOS` and `Android` systems, usually we set Browserslist as:
+- Set to browsers that supports native ES Modules (recommended):
 
+```yaml
+chrome >= 61
+edge >= 16
+firefox >= 60
+safari >= 11
+ios_saf >= 11
 ```
+
+- Set to browsers that support ES6:
+
+```yaml
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10
+```
+
+### Mobile H5 scenario
+
+The mobile H5 scenario is mainly compatible with `iOS` and `Android` systems, usually we set Browserslist as:
+
+```yaml
 iOS >= 9
 Android >= 4.4
 last 2 versions
@@ -119,36 +153,14 @@ The above Browserslist will compile the code to the ES5 specification, which is
 
 You can also choose to use the ES6 specification in the H5 scene, which will make the performance of the page better. The corresponding Browserslist is as follows:
 
-```
+```yaml
 iOS >= 10
 Chrome >= 51
 > 0.5%
 not dead
 not op_mini all
 ```
 
-### Desktop PC scene
-
-In the desktop PC scenario, if you need to be compatible with IE 11 browsers, you can set Browserslist to:
-
-```
-> 0.5%
-not dead
-Internet Explorer 11
-```
-
-The above Browserslist will compile the code to the ES5 specification. For the specific browser list, please check [browserslist.dev](https://browserslist.dev/?q=PiAwLjUlLCBub3QgZGVhZCwgSUUgMTE%3D).
-
-If you don't need to be compatible with IE 11 browsers, you can adjust Browserslist to get a more performant output, such as setting it to browsers that supports native ES Modules:
-
-```
-chrome >= 61
-edge >= 16
-firefox >= 60
-safari >= 11
-ios_saf >= 11
-```
-
 ## Default Browserslist
 
 Builder will set different default values of Browserslist according to [build target](/guide/basic/build-target.html), but we recommend that you explicitly set Browserslist in your project, which will make the compatible scope of the project more clear.
@@ -157,7 +169,7 @@ Builder will set different default values of Browserslist according to [build ta
 
 The default values of web target are as follows:
 
-```bash
+```yaml
 > 0.01%
 not dead
 not op_mini all
@@ -169,15 +181,15 @@ Under this browser range, JavaScript code will be compiled to ES5 syntax.
 
 Node target will be compatible with Node.js 14.0 by default.
 
-```bash
+```yaml
 node >= 14
 ```
 
 ### Web Worker Target
 
 The default Browserslist of the Web Worker target is consistent with the Web target.
 
-```bash
+```yaml
 > 0.01%
 not dead
 not op_mini all
@@ -187,7 +199,7 @@ not op_mini all
 
 Modern Web target will be compatible with browsers that support [native ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) by default.
 
-```bash
+```yaml
 chrome >= 61
 edge >= 16
 firefox >= 60

packages/document/builder-doc/docs/zh/guide/advanced/browserslist.md

@@ -38,7 +38,7 @@ polyfill 是一种用于解决浏览器兼容问题的技术。它用于模拟
 
 通过独立的 `.browserslistrc` 文件设置：
 
-```
+```yaml
 iOS >= 9
 Android >= 4.4
 last 2 versions
@@ -101,11 +101,45 @@ export default {
 
 以下是一些常用的浏览器范围，你可以根据自己的项目类型进行选择。
 
+### 桌面端 PC 场景
+
+在桌面端 PC 场景下，如果你需要兼容 IE 11 浏览器，则可以将 Browserslist 设置为：
+
+```yaml
+> 0.5%
+not dead
+IE 11
+```
+
+以上浏览器范围会将代码编译至 ES5 规范，具体对应的浏览器列表可以查看 [browserslist.dev](https://browserslist.dev/?q=PiAwLjUlLCBub3QgZGVhZCwgSUUgMTE%3D)。
+
+如果你不需要兼容 IE 11 浏览器，那么可以调整 Browserslist 来获得更高性能的产物，比如：
+
+- 设置为支持原生 ES Modules 的浏览器（推荐）：
+
+```yaml
+chrome >= 61
+edge >= 16
+firefox >= 60
+safari >= 11
+ios_saf >= 11
+```
+
+- 设置为支持 ES6 的浏览器：
+
+```yaml
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10
+```
+
 ### 移动端 H5 场景
 
 移动端 H5 场景主要兼容 `iOS` 和 `Android` 系统，通常我们将 Browserslist 设置为：
 
-```
+```yaml
 iOS >= 9
 Android >= 4.4
 last 2 versions
@@ -119,36 +153,14 @@ not dead
 
 你也可以选择在 H5 场景使用 ES6 规范，这样会让页面的性能表现更好，对应的 Browserslist 如下：
 
-```
+```yaml
 iOS >= 10
 Chrome >= 51
 > 0.5%
 not dead
 not op_mini all
 ```
 
-### 桌面端 PC 场景
-
-在桌面端 PC 场景下，如果你需要兼容 IE 11 浏览器，则可以将 Browserslist 设置为：
-
-```
-> 0.5%
-not dead
-IE 11
-```
-
-以上浏览器范围会将代码编译至 ES5 规范，具体对应的浏览器列表可以查看 [browserslist.dev](https://browserslist.dev/?q=PiAwLjUlLCBub3QgZGVhZCwgSUUgMTE%3D)。
-
-如果你不需要兼容 IE 11 浏览器，那么可以调整 Browserslist 来获得更高性能的产物，比如设置为支持原生 ES Modules 的浏览器：
-
-```
-chrome >= 61
-edge >= 16
-firefox >= 60
-safari >= 11
-ios_saf >= 11
-```
-
 ## Browserslist 默认值
 
 Builder 会根据[构建产物类型](/guide/basic/build-target.html)来设置不同的 Browserslist 默认值，但我们推荐你在项目中显式设置 Browserslist，这会让项目的兼容范围更加明确。
@@ -157,7 +169,7 @@ Builder 会根据[构建产物类型](/guide/basic/build-target.html)来设置
 
 Web 产物的默认值如下所示：
 
-```
+```yaml
 > 0.01%
 not dead
 not op_mini all
@@ -169,15 +181,15 @@ not op_mini all
 
 Node 产物默认最低兼容到 Node.js 14.0 版本。
 
-```
+```yaml
 node >= 14
 ```
 
 ### Web Worker 产物
 
 Web Worker 产物默认的浏览器范围与 Web 一致。
 
-```
+```yaml
 > 0.01%
 not dead
 not op_mini all
@@ -187,7 +199,7 @@ not op_mini all
 
 Modern Web 产物默认最低兼容到支持[原生 ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) 的浏览器。
 
-```
+```yaml
 chrome >= 61
 edge >= 16
 firefox >= 60

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

@@ -1,8 +1,26 @@
 ---
-title: Compatibility
 sidebar_position: 5
 ---
-# Compatibility
+
+# Browser Compatibility
+
+## Browserslist Configuration
+
+Modern.js supports setting the browserslist for your web applications. You can set the [Browserslist](https://browsersl.ist/) in the `.browserslistrc` file.
+
+When you create a new Modern.js project, it includes a `.browserslistrc` configuration by default, which means that JavaScript code will be compiled to ES6.
+
+```yaml title=".browserslistrc"
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10
+```
+
+:::tip
+Please refer to [Modern.js Builder - Browserslist](https://modernjs.dev/builder/en/guide/advanced/browserslist) for more information.
+:::
 
 ## Browserslist
 

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

@@ -1,26 +1,25 @@
 ---
-title: 客户端兼容性
 sidebar_position: 5
 ---
-# 客户端兼容性
+
+# 浏览器兼容性
 
 ## Browserslist 配置
 
-Modern.js 支持在项目根目录 `package.json` 文件中的 `browserslist` 字段（或单独的 `.browserslistrc` 文件）指定项目覆盖的目标浏览器范围。该值会被 [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) 和 [`autoprefixer`](https://github.com/postcss/autoprefixer) 用来确定需要转换的 JavaScript 语法特性和需要添加的 CSS 浏览器前缀。
+Modern.js 支持设置 Web 应用需要兼容的浏览器范围，你可以在 `.browserslistrc` 文件里设置 [Browserslist](https://browsersl.ist/) 的值。
 
-Modern.js 中默认值如下:
+当你创建一个新的 Modern.js 项目时，默认会包含一份 `.browserslistrc` 配置，这表示 JavaScript 代码会被编译至 ES6 格式。
 
-```js
-['> 0.01%', 'not dead', 'not op_mini all'];
+```yaml title=".browserslistrc"
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10
 ```
 
-可以在[这里](https://github.com/browserslist/browserslist)了解如何自定义浏览器范围。
-
-查看 Modern.js Builder 文档了解更多 [Browserslist](https://modernjs.dev/builder/guide/advanced/browserslist.html) 相关内容。
-
-:::note
-Modern.js 支持配置 [output.overrideBrowserslist](/configure/app/output/override-browserslist) 覆盖默认 browserslist 值。
-
+:::tip
+请查看 [Modern.js Builder - 设置浏览器范围](https://modernjs.dev/builder/guide/advanced/browserslist) 来了解更多内容。
 :::
 
 ## Polyfill

packages/generator/generators/mwa-generator/templates/base-template/.browserslistrc.handlebars

@@ -0,0 +1,5 @@
+chrome >= 51
+edge >= 15
+firefox >= 54
+safari >= 10
+ios_saf >= 10