From d7217b2087232de7d8155a66104bb88e5e1ddaf5 Mon Sep 17 00:00:00 2001 From: undermoon Date: Thu, 4 Jan 2024 15:08:47 +0800 Subject: [PATCH 1/7] feat(plugin-legacy): `modernTargets` options --- packages/plugin-legacy/src/index.ts | 2 +- packages/plugin-legacy/src/types.ts | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts index 9495d868d71502..f1d4258db30479 100644 --- a/packages/plugin-legacy/src/index.ts +++ b/packages/plugin-legacy/src/index.ts @@ -205,7 +205,7 @@ 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 + config.build.target = options.modernTargets || modernTargetsEsbuild } } diff --git a/packages/plugin-legacy/src/types.ts b/packages/plugin-legacy/src/types.ts index 954617d900d241..e04a159bf1ebdd 100644 --- a/packages/plugin-legacy/src/types.ts +++ b/packages/plugin-legacy/src/types.ts @@ -3,6 +3,10 @@ export interface Options { * default: 'defaults' */ targets?: string | string[] | { [key: string]: string } + /** + * default: ['es2020', 'edge79', 'firefox67', 'chrome64', 'safari12'] + */ + modernTargets?: string | string[] /** * default: true */ From 6c3aae19501df104ce1783241102443d34d96940 Mon Sep 17 00:00:00 2001 From: undermoon Date: Mon, 8 Jan 2024 15:26:17 +0800 Subject: [PATCH 2/7] feat(plugin-legacy): modernTargets options --- packages/plugin-legacy/package.json | 1 + packages/plugin-legacy/src/index.ts | 12 ++++++++++-- packages/plugin-legacy/src/types.ts | 2 +- pnpm-lock.yaml | 17 +++++++++++++++++ 4 files changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/plugin-legacy/package.json b/packages/plugin-legacy/package.json index 9916818d2982c6..bc428d50987a39 100644 --- a/packages/plugin-legacy/package.json +++ b/packages/plugin-legacy/package.json @@ -55,6 +55,7 @@ }, "devDependencies": { "acorn": "^8.11.2", + "esbuild-plugin-browserslist": "^0.10.0", "picocolors": "^1.0.0", "vite": "workspace:*" } diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts index f1d4258db30479..1c34c88942d12b 100644 --- a/packages/plugin-legacy/src/index.ts +++ b/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 = [ @@ -205,7 +207,9 @@ 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 = options.modernTargets || modernTargetsEsbuild + config.build.target = options.modernTargets + ? resolveToEsbuildTarget(browserslist(options.modernTargets)) + : modernTargetsEsbuild } } @@ -322,6 +326,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 +402,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) diff --git a/packages/plugin-legacy/src/types.ts b/packages/plugin-legacy/src/types.ts index e04a159bf1ebdd..99e241c398c9eb 100644 --- a/packages/plugin-legacy/src/types.ts +++ b/packages/plugin-legacy/src/types.ts @@ -4,7 +4,7 @@ export interface Options { */ targets?: string | string[] | { [key: string]: string } /** - * default: ['es2020', 'edge79', 'firefox67', 'chrome64', 'safari12'] + * default: 'edge>=80, firefox>=72, chrome>=80, safari>=13.1, chromeAndroid>=80, iOS>=13.1' */ modernTargets?: string | string[] /** diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 75ba31ddaaf313..c3c36b060c9d10 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -226,6 +226,9 @@ importers: acorn: specifier: ^8.11.2 version: 8.11.2 + esbuild-plugin-browserslist: + specifier: ^0.10.0 + version: 0.10.0(browserslist@4.22.2) picocolors: specifier: ^1.0.0 version: 1.0.0 @@ -5604,6 +5607,20 @@ packages: ext: 1.6.0 dev: false + /esbuild-plugin-browserslist@0.10.0(browserslist@4.22.2): + resolution: {integrity: sha512-rZWFcp3l+73xDiJB+Vl9UqP1VVs+L4E0lygbwJl6UTmW2qQago7DLT56hBu0vocH/TtZsAcRHj0+qHqkkB5Gww==} + engines: {node: '>=18'} + peerDependencies: + browserslist: ^4.21.8 + esbuild: ~0.19.2 + dependencies: + browserslist: 4.22.2 + debug: 4.3.4 + zod: 3.21.4 + transitivePeerDependencies: + - supports-color + dev: true + /esbuild@0.18.20: resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==} engines: {node: '>=12'} From 32c8cada2bab927ce6d63fda44cbba25c0c57400 Mon Sep 17 00:00:00 2001 From: undermoon Date: Wed, 10 Jan 2024 15:31:15 +0800 Subject: [PATCH 3/7] fix(plugin-legacy): set `esbuild-plugin-browserslist` to `dependencies` --- packages/plugin-legacy/package.json | 2 +- pnpm-lock.yaml | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/plugin-legacy/package.json b/packages/plugin-legacy/package.json index bc428d50987a39..66908b2df60318 100644 --- a/packages/plugin-legacy/package.json +++ b/packages/plugin-legacy/package.json @@ -45,6 +45,7 @@ "@babel/preset-env": "^7.23.6", "browserslist": "^4.22.2", "core-js": "^3.34.0", + "esbuild-plugin-browserslist": "^0.10.0", "magic-string": "^0.30.5", "regenerator-runtime": "^0.14.0", "systemjs": "^6.14.2" @@ -55,7 +56,6 @@ }, "devDependencies": { "acorn": "^8.11.2", - "esbuild-plugin-browserslist": "^0.10.0", "picocolors": "^1.0.0", "vite": "workspace:*" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c3c36b060c9d10..19a2f8c2ab400b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -213,6 +213,9 @@ importers: core-js: specifier: ^3.34.0 version: 3.34.0 + esbuild-plugin-browserslist: + specifier: ^0.10.0 + version: 0.10.0(browserslist@4.22.2) magic-string: specifier: ^0.30.5 version: 0.30.5 @@ -226,9 +229,6 @@ importers: acorn: specifier: ^8.11.2 version: 8.11.2 - esbuild-plugin-browserslist: - specifier: ^0.10.0 - version: 0.10.0(browserslist@4.22.2) picocolors: specifier: ^1.0.0 version: 1.0.0 @@ -5619,7 +5619,7 @@ packages: zod: 3.21.4 transitivePeerDependencies: - supports-color - dev: true + dev: false /esbuild@0.18.20: resolution: {integrity: sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==} @@ -10109,7 +10109,6 @@ packages: /zod@3.21.4: resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==} - dev: true /zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} From b69e265881fe780b3a8a56e187b13858aaaf9a23 Mon Sep 17 00:00:00 2001 From: undermoon Date: Wed, 10 Jan 2024 15:38:10 +0800 Subject: [PATCH 4/7] docs(plugin-legacy): add `modernTargets` option --- packages/plugin-legacy/README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/plugin-legacy/README.md b/packages/plugin-legacy/README.md index 27f6f22e803be8..c4f460cd71a140 100644 --- a/packages/plugin-legacy/README.md +++ b/packages/plugin-legacy/README.md @@ -40,7 +40,18 @@ 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. From 002b64951eecdfc7cb86e9d7400738d1151f0c41 Mon Sep 17 00:00:00 2001 From: undermoon Date: Wed, 10 Jan 2024 15:41:36 +0800 Subject: [PATCH 5/7] docs(plugin-legacy): `modernTargets` fallback --- packages/plugin-legacy/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-legacy/README.md b/packages/plugin-legacy/README.md index c4f460cd71a140..5e28fb32d63b75 100644 --- a/packages/plugin-legacy/README.md +++ b/packages/plugin-legacy/README.md @@ -55,7 +55,7 @@ npm add -D terser 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. + If it's not set, plugin-legacy will fallback to the default value. ### `polyfills` From c0f3f81fa0f77eb885269f4cc25fc7bde18f8209 Mon Sep 17 00:00:00 2001 From: undermoon Date: Fri, 12 Jan 2024 21:37:18 +0800 Subject: [PATCH 6/7] feat(plugin-legacy): add `modernTargets` option warning --- packages/plugin-legacy/src/index.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts index 1c34c88942d12b..c3caf3878f0c4a 100644 --- a/packages/plugin-legacy/src/index.ts +++ b/packages/plugin-legacy/src/index.ts @@ -185,6 +185,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] { } let overriddenBuildTarget = false + let overriddenDefaultModernTargets = false const legacyConfigPlugin: Plugin = { name: 'vite:legacy-config', @@ -207,6 +208,7 @@ 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 + overriddenDefaultModernTargets = options.modernTargets !== undefined config.build.target = options.modernTargets ? resolveToEsbuildTarget(browserslist(options.modernTargets)) : modernTargetsEsbuild @@ -230,6 +232,13 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] { ), ) } + if (overriddenDefaultModernTargets) { + config.logger.warn( + colors.yellow( + `plugin-legacy overrode builtin targets of modern chunks. Some versions of browsers between legacy and modern maybe not be supported.`, + ), + ) + } }, } From 2cf2a7e8f3218d808b616714e57f4aab20cdece6 Mon Sep 17 00:00:00 2001 From: bluwy Date: Tue, 16 Jan 2024 00:22:13 +0800 Subject: [PATCH 7/7] chore: tweak message --- packages/plugin-legacy/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-legacy/src/index.ts b/packages/plugin-legacy/src/index.ts index c3caf3878f0c4a..d7f0bb206547aa 100644 --- a/packages/plugin-legacy/src/index.ts +++ b/packages/plugin-legacy/src/index.ts @@ -235,7 +235,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] { if (overriddenDefaultModernTargets) { config.logger.warn( colors.yellow( - `plugin-legacy overrode builtin targets of modern chunks. Some versions of browsers between legacy and modern maybe not be supported.`, + `plugin-legacy 'modernTargets' option overrode the builtin targets of modern chunks. Some versions of browsers between legacy and modern may not be supported.`, ), ) }