feat(plugin-legacy): add modernTargets option (#15506)

Co-authored-by: bluwy <bjornlu.dev@gmail.com>

packages/plugin-legacy/README.md

@@ -40,12 +40,23 @@ npm add -D terser
 - **Type:** `string | string[] | { [key: string]: string }`
 - **Default:** [`'last 2 versions and not dead, > 0.3%, Firefox ESR'`](https://browsersl.ist/#q=last+2+versions+and+not+dead%2C+%3E+0.3%25%2C+Firefox+ESR)
 
-  If explicitly set, it's passed on to [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env#targets).
+  If explicitly set, it's passed on to [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env#targets) when rendering **legacy chunks**.
 
   The query is also [Browserslist compatible](https://github.com/browserslist/browserslist). See [Browserslist Best Practices](https://github.com/browserslist/browserslist#best-practices) for more details.
 
   If it's not set, plugin-legacy will load [the browserslist config sources](https://github.com/browserslist/browserslist#queries) and then fallback to the default value.
 
+### `modernTargets`
+
+- **Type:** `string | string[]`
+- **Default:** [`'edge>=80, firefox>=72, chrome>=80, safari>=13.1, chromeAndroid>=80, iOS>=13.1'`](https://browsersl.ist/#q=edge%3E%3D80%2C+firefox%3E%3D72%2C+chrome%3E%3D80%2C+safari%3E%3D13.1%2C+chromeAndroid%3E%3D80%2C+iOS%3E%3D13.1)
+
+  If explicitly set, it's passed on to [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env#targets) when rendering **modern chunks**.
+
+  The query is also [Browserslist compatible](https://github.com/browserslist/browserslist). See [Browserslist Best Practices](https://github.com/browserslist/browserslist#best-practices) for more details.
+
+  If it's not set, plugin-legacy will fallback to the default value.
+
 ### `polyfills`
 
 - **Type:** `boolean | string[]`

packages/plugin-legacy/package.json

@@ -45,6 +45,7 @@
     "@babel/preset-env": "^7.23.8",
     "browserslist": "^4.22.2",
     "core-js": "^3.35.0",
+    "esbuild-plugin-browserslist": "^0.10.0",
     "magic-string": "^0.30.5",
     "regenerator-runtime": "^0.14.1",
     "systemjs": "^6.14.3"

packages/plugin-legacy/src/index.ts

@@ -24,6 +24,7 @@ import type {
 } from '@babel/core'
 import colors from 'picocolors'
 import browserslist from 'browserslist'
+import { resolveToEsbuildTarget } from 'esbuild-plugin-browserslist'
 import type { Options } from './types'
 import {
   detectModernBrowserCode,
@@ -125,6 +126,7 @@ const prefixedHashInFileNameRE = /\W?\[hash(:\d+)?\]/
 function viteLegacyPlugin(options: Options = {}): Plugin[] {
   let config: ResolvedConfig
   let targets: Options['targets']
+  let modernTargets: Options['modernTargets']
 
   // browsers supporting ESM + dynamic import + import.meta + async generator
   const modernTargetsEsbuild = [
@@ -183,6 +185,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
   }
 
   let overriddenBuildTarget = false
+  let overriddenDefaultModernTargets = false
   const legacyConfigPlugin: Plugin = {
     name: 'vite:legacy-config',
 
@@ -205,7 +208,10 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           // Vite's default target browsers are **not** the same.
           // See https://github.com/vitejs/vite/pull/10052#issuecomment-1242076461
           overriddenBuildTarget = config.build.target !== undefined
-          config.build.target = modernTargetsEsbuild
+          overriddenDefaultModernTargets = options.modernTargets !== undefined
+          config.build.target = options.modernTargets
+            ? resolveToEsbuildTarget(browserslist(options.modernTargets))
+            : modernTargetsEsbuild
         }
       }
 
@@ -226,6 +232,13 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           ),
         )
       }
+      if (overriddenDefaultModernTargets) {
+        config.logger.warn(
+          colors.yellow(
+            `plugin-legacy 'modernTargets' option overrode the builtin targets of modern chunks. Some versions of browsers between legacy and modern may not be supported.`,
+          ),
+        )
+      }
     },
   }
 
@@ -322,6 +335,10 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
         'last 2 versions and not dead, > 0.3%, Firefox ESR'
       isDebug && console.log(`[@vitejs/plugin-legacy] targets:`, targets)
 
+      modernTargets = options.modernTargets || modernTargetsBabel
+      isDebug &&
+        console.log(`[@vitejs/plugin-legacy] modernTargets:`, modernTargets)
+
       const getLegacyOutputFileName = (
         fileNames:
           | string
@@ -394,7 +411,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           genModern
         ) {
           // analyze and record modern polyfills
-          await detectPolyfills(raw, modernTargetsBabel, modernPolyfills)
+          await detectPolyfills(raw, modernTargets, modernPolyfills)
         }
 
         const ms = new MagicString(raw)

packages/plugin-legacy/src/types.ts

@@ -3,6 +3,10 @@ export interface Options {
    * default: 'defaults'
    */
   targets?: string | string[] | { [key: string]: string }
+  /**
+   * default: 'edge>=80, firefox>=72, chrome>=80, safari>=13.1, chromeAndroid>=80, iOS>=13.1'
+   */
+  modernTargets?: string | string[]
   /**
    * default: true
    */