fix(legacy): modernTargets should set build.target (vitejs#20393)

Author: sapphi-red

packages/plugin-legacy/README.md

@@ -40,7 +40,7 @@ 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) when rendering **legacy chunks**.
+  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.
 
@@ -51,12 +51,14 @@ npm add -D terser
 - **Type:** `string | string[]`
 - **Default:** [`'edge>=79, firefox>=67, chrome>=64, safari>=12, chromeAndroid>=64, iOS>=12'`](https://browsersl.ist/#q=edge%3E%3D79%2C+firefox%3E%3D67%2C+chrome%3E%3D64%2C+safari%3E%3D12%2C+chromeAndroid%3E%3D64%2C+iOS%3E%3D12)
 
-  If explicitly set, it's passed on to [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env#targets) when rendering **modern chunks**.
+  It's passed on to [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env#targets) when collecting polyfills for **modern chunks**. The value set here will override the `build.target` option.
 
   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.
 
+  Note that this options should not be set unless `renderLegacyChunks` is set to `false`.
+
 ### `polyfills`
 
 - **Type:** `boolean | string[]`

packages/plugin-legacy/src/index.ts

@@ -125,6 +125,20 @@ const _require = createRequire(import.meta.url)
 const nonLeadingHashInFileNameRE = /[^/]+\[hash(?::\d+)?\]/
 const prefixedHashInFileNameRE = /\W?\[hash(?::\d+)?\]/
 
+// browsers supporting ESM + dynamic import + import.meta + async generator
+const modernTargetsEsbuild = [
+  'es2020',
+  'edge79',
+  'firefox67',
+  'chrome64',
+  'safari12',
+]
+// same with above but by browserslist syntax
+// es2020 = chrome 80+, safari 13.1+, firefox 72+, edge 80+
+// https://github.com/evanw/esbuild/issues/121#issuecomment-646956379
+const modernTargetsBabel =
+  'edge>=79, firefox>=67, chrome>=64, safari>=12, chromeAndroid>=64, iOS>=12'
+
 function viteLegacyPlugin(options: Options = {}): Plugin[] {
   if ('rolldownVersion' in vite) {
     const { default: viteLegacyPluginForRolldownVite } = _require(
@@ -135,21 +149,8 @@ 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 = [
-    'es2020',
-    'edge79',
-    'firefox67',
-    'chrome64',
-    'safari12',
-  ]
-  // same with above but by browserslist syntax
-  // es2020 = chrome 80+, safari 13.1+, firefox 72+, edge 80+
-  // https://github.com/evanw/esbuild/issues/121#issuecomment-646956379
-  const modernTargetsBabel =
-    'edge>=79, firefox>=67, chrome>=64, safari>=12, chromeAndroid>=64, iOS>=12'
+  const modernTargets: Options['modernTargets'] =
+    options.modernTargets || modernTargetsBabel
 
   const genLegacy = options.renderLegacyChunks !== false
   const genModern = options.renderModernChunks !== false
@@ -207,6 +208,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
   }
 
   let overriddenBuildTarget = false
+  let overriddenBuildTargetOnlyModern = false
   let overriddenDefaultModernTargets = false
   const legacyConfigPlugin: Plugin = {
     name: 'vite:legacy-config',
@@ -231,16 +233,18 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           // See https://github.com/vitejs/vite/pull/10052#issuecomment-1242076461
           overriddenBuildTarget = config.build.target !== undefined
           overriddenDefaultModernTargets = options.modernTargets !== undefined
+        } else {
+          overriddenBuildTargetOnlyModern = config.build.target !== undefined
+        }
 
-          if (options.modernTargets) {
-            // Package is ESM only
-            const { default: browserslistToEsbuild } = await import(
-              'browserslist-to-esbuild'
-            )
-            config.build.target = browserslistToEsbuild(options.modernTargets)
-          } else {
-            config.build.target = modernTargetsEsbuild
-          }
+        if (options.modernTargets) {
+          // Package is ESM only
+          const { default: browserslistToEsbuild } = await import(
+            'browserslist-to-esbuild'
+          )
+          config.build.target = browserslistToEsbuild(options.modernTargets)
+        } else {
+          config.build.target = modernTargetsEsbuild
         }
       }
 
@@ -261,6 +265,13 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
           ),
         )
       }
+      if (overriddenBuildTargetOnlyModern) {
+        config.logger.warn(
+          colors.yellow(
+            `plugin-legacy overrode 'build.target'. You should pass 'modernTargets' as an option to this plugin with the list of browsers to support instead.`,
+          ),
+        )
+      }
       if (overriddenDefaultModernTargets) {
         config.logger.warn(
           colors.yellow(
@@ -384,7 +395,6 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
       }
       config = _config
 
-      modernTargets = options.modernTargets || modernTargetsBabel
       if (isDebug) {
         console.log(`[@vitejs/plugin-legacy] modernTargets:`, modernTargets)
       }