feat(plugin-legacy): add modernTargets option

[undermoonn]

Description

When renderLegacyChunks option enabled, legacy plugin will force set build.target to ['es2020', 'edge79', 'firefox67', 'chrome64', 'safari12'] rendering modern chunks.

Additional context

fix #14527

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines, especially the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Update the corresponding documentation if needed.
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[bluwy]

The implementation looks great! Thanks for updating it. Would you be able to update the README about the new modernTargets option too?

[patak-dev]

@undermoonn, we discussed this PR in the last team meeting and decided to move forward with it. The only thing is that we should add a warning using config.logger.warn if modernTargets is used and renderLegacyChunks is true to avoid users having some versions of browsers between legacy and modern not being supported.

[undermoonn]

Thanks for replies and specific guidance! Love vite ❤️

[jderusse]

Thanks for this feature. Do you have an ETA for the next release (I'm not demanding, just asking)
@vitejs/plugin-legacy 5.2.0 is 2 months old but vite 5.0.12 has been release few days ago

[bluwy]

No problem @jderusse. Thanks for the nudge, I just cut a release for plugin-legacy v5.3.0

[C-Higgins]

This PR does not work as intended. modernTargets is never set if renderLegacyChunks: false is used. The culprit is from this excerpt:

      if (!genLegacy || config.build.ssr) {
        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);
      modernTargets = options.modernTargets || modernTargetsBabel;

Notice that the function returns before the modernTargets can be set.

This means that later on, the variable is undefined, and we're back to the original behavior:

        if (options.modernPolyfills && !Array.isArray(options.modernPolyfills) && genModern) {
          await detectPolyfills(raw, modernTargets, modernPolyfills);  // modernTargets is undefined
        }

[bluwy]

Thanks for flagging that @C-Higgins. That condition does seem oddly placed, the targets and modernTargets option should probably be placed above it 🤔 Would you like to create an issue or PR for this?

[undermoonn]

Sorry to that @C-Higgins I didn't check the code when renderLegacyChunks: false

Maybe I can fix it with code below

if (options.modernPolyfills && !Array.isArray(options.modernPolyfills) && genModern) {
  await detectPolyfills(raw, options.modernTargets || modernTargetsBabel, modernPolyfills);
}

Place target above that condition will load browserslist which is unnecessary in ssr mode.