fix(plugin-legacy)!: support browserslist and update default target (#11318)

Co-authored-by: 翠 / green <[email protected]>
fixes #2476

Author: KAROTT7

packages/plugin-legacy/README.md

@@ -38,11 +38,11 @@ npm add -D terser
 ### `targets`
 
 - **Type:** `string | string[] | { [key: string]: string }`
-- **Default:** `'defaults'`
+- **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).
 
-  The query is also [Browserslist compatible](https://github.com/browserslist/browserslist). The default value, `'defaults'`, is what is recommended by Browserslist. See [Browserslist Best Practices](https://github.com/browserslist/browserslist#best-practices) for more details.
+  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.
 
 ### `polyfills`
 

packages/plugin-legacy/package.json

@@ -41,8 +41,10 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-legacy#readme",
   "dependencies": {
-    "@babel/standalone": "^7.20.14",
     "core-js": "^3.27.2",
+    "@babel/core": "^7.20.12",
+    "@babel/preset-env": "^7.20.2",
+    "browserslist": "^4.21.4",
     "magic-string": "^0.27.0",
     "regenerator-runtime": "^0.13.11",
     "systemjs": "^6.13.0"
@@ -52,7 +54,6 @@
     "vite": "^4.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
     "picocolors": "^1.0.0",
     "vite": "workspace:*"
   }

packages/plugin-legacy/src/index.ts

@@ -23,14 +23,15 @@ import type {
   types as BabelTypes,
 } from '@babel/core'
 import colors from 'picocolors'
+import { loadConfig as browserslistLoadConfig } from 'browserslist'
 import type { Options } from './types'
 
 // lazy load babel since it's not used during dev
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-let babel: typeof import('@babel/standalone') | undefined
+let babel: typeof import('@babel/core') | undefined
 async function loadBabel() {
   if (!babel) {
-    babel = await import('@babel/standalone')
+    babel = await import('@babel/core')
   }
   return babel
 }
@@ -122,7 +123,8 @@ const _require = createRequire(import.meta.url)
 
 function viteLegacyPlugin(options: Options = {}): Plugin[] {
   let config: ResolvedConfig
-  const targets = options.targets || 'defaults'
+  let targets: Options['targets']
+
   const genLegacy = options.renderLegacyChunks !== false
   const genDynamicFallback = genLegacy
 
@@ -296,6 +298,12 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
         return
       }
 
+      targets =
+        options.targets ||
+        browserslistLoadConfig({ path: config.root }) ||
+        'last 2 versions and not dead, > 0.3%, Firefox ESR'
+      isDebug && console.log(`[@vitejs/plugin-legacy] targets:`, targets)
+
       const getLegacyOutputFileName = (
         fileNames:
           | string
@@ -412,7 +420,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
       // transform the legacy chunk with @babel/preset-env
       const sourceMaps = !!config.build.sourcemap
       const babel = await loadBabel()
-      const { code, map } = babel.transform(raw, {
+      const result = babel.transform(raw, {
         babelrc: false,
         configFile: false,
         compact: !!config.build.minify,
@@ -431,7 +439,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
             }),
           ],
           [
-            'env',
+            '@babel/preset-env',
             createBabelPresetEnvOptions(targets, {
               needPolyfills,
               ignoreBrowserslistConfig: options.ignoreBrowserslistConfig,
@@ -440,7 +448,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
         ],
       })
 
-      if (code) return { code, map }
+      if (result) return { code: result.code!, map: result.map }
       return null
     },
 
@@ -595,20 +603,20 @@ export async function detectPolyfills(
   list: Set<string>,
 ): Promise<void> {
   const babel = await loadBabel()
-  const { ast } = babel.transform(code, {
+  const result = babel.transform(code, {
     ast: true,
     babelrc: false,
     configFile: false,
     presets: [
       [
-        'env',
+        '@babel/preset-env',
         createBabelPresetEnvOptions(targets, {
           ignoreBrowserslistConfig: true,
         }),
       ],
     ],
   })
-  for (const node of ast!.program.body) {
+  for (const node of result!.ast!.program.body) {
     if (node.type === 'ImportDeclaration') {
       const source = node.source.value
       if (