From 0476a7619c24a464675be9273996275ee4fe68d0 Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Thu, 10 Jul 2025 22:31:12 +0900 Subject: [PATCH 1/2] fix(legacy): `modernTargets` should set `build.target` --- packages/plugin-legacy/README.md | 4 +- packages/plugin-legacy/src/index.ts | 60 +++++++++++++++++------------ 2 files changed, 37 insertions(+), 27 deletions(-) diff --git a/packages/plugin-legacy/README.md b/packages/plugin-legacy/README.md index 8026113f8b8bc3..320f5c1d356bc0 100644 --- a/packages/plugin-legacy/README.md +++ b/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,7 +51,7 @@ 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 query is also [Browserslist compatible](https://github.com/browserslist/browserslist). See [Browserslist Best Practices](https://github.com/browserslist/browserslist#best-practices) for more details. diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts index 4656513284c0c0..6fac21982db0be 100644 --- a/packages/plugin-legacy/src/index.ts +++ b/packages/plugin-legacy/src/index.ts @@ -124,24 +124,25 @@ 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[] { 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 @@ -199,6 +200,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] { } let overriddenBuildTarget = false + let overriddenBuildTargetOnlyModern = false let overriddenDefaultModernTargets = false const legacyConfigPlugin: Plugin = { name: 'vite:legacy-config', @@ -223,16 +225,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 } } @@ -253,6 +257,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( @@ -376,7 +387,6 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] { } config = _config - modernTargets = options.modernTargets || modernTargetsBabel if (isDebug) { console.log(`[@vitejs/plugin-legacy] modernTargets:`, modernTargets) } From 5876ecbae4c4deed2165fb8413efaed85b182c50 Mon Sep 17 00:00:00 2001 From: sapphi-red <49056869+sapphi-red@users.noreply.github.com> Date: Wed, 6 Aug 2025 17:29:51 +0900 Subject: [PATCH 2/2] docs: update README --- packages/plugin-legacy/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/plugin-legacy/README.md b/packages/plugin-legacy/README.md index 320f5c1d356bc0..23128df2875d50 100644 --- a/packages/plugin-legacy/README.md +++ b/packages/plugin-legacy/README.md @@ -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) - It's passed on to [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env#targets) when collecting polyfills for **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[]`