![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@vitejs/plugin-legacy
Advanced tools
Readme
Vite's default browser support baseline is Native ESM. This plugin provides support for legacy browsers that do not support native ESM when building for production.
By default, this plugin will:
Generate a corresponding legacy chunk for every chunk in the final bundle, transformed with @babel/preset-env and emitted as SystemJS modules (code splitting is still supported!).
Generate a polyfill chunk including SystemJS runtime, and any necessary polyfills determined by specified browser targets and actual usage in the bundle.
Inject <script nomodule>
tags into generated HTML to conditionally load the polyfills and legacy bundle only in browsers without native ESM support.
Inject the import.meta.env.LEGACY
env variable, which will only be true
in the legacy production build, and false
in all other cases.
// vite.config.js
import legacy from '@vitejs/plugin-legacy'
export default {
plugins: [
legacy({
targets: ['defaults', 'not IE 11']
})
]
}
Terser must be installed because plugin-legacy uses Terser for minification.
npm add -D terser
targets
Type: string | string[] | { [key: string]: string }
Default: 'defaults'
If explicitly set, it's passed on to @babel/preset-env
.
The query is also Browserslist compatible. The default value, 'defaults'
, is what is recommended by Browserslist. See Browserslist Best Practices for more details.
polyfills
Type: boolean | string[]
Default: true
By default, a polyfills chunk is generated based on the target browser ranges and actual usage in the final bundle (detected via @babel/preset-env
's useBuiltIns: 'usage'
).
Set to a list of strings to explicitly control which polyfills to include. See Polyfill Specifiers for details.
Set to false
to avoid generating polyfills and handle it yourself (will still generate legacy chunks with syntax transformations).
additionalLegacyPolyfills
Type: string[]
Add custom imports to the legacy polyfills chunk. Since the usage-based polyfill detection only covers ES language features, it may be necessary to manually specify additional DOM API polyfills using this option.
Note: if additional polyfills are needed for both the modern and legacy chunks, they can simply be imported in the application source code.
ignoreBrowserslistConfig
Type: boolean
Default: false
@babel/preset-env
automatically detects browserslist
config sources:
browserslist
field in package.json
.browserslistrc
file in cwd.Set to false
to ignore these sources.
modernPolyfills
Type: boolean | string[]
Default: false
Defaults to false
. Enabling this option will generate a separate polyfills chunk for the modern build (targeting browsers with native ESM support).
Set to a list of strings to explicitly control which polyfills to include. See Polyfill Specifiers for details.
Note it is not recommended to use the true
value (which uses auto-detection) because core-js@3
is very aggressive in polyfill inclusions due to all the bleeding edge features it supports. Even when targeting native ESM support, it injects 15kb of polyfills!
If you don't have hard reliance on bleeding edge runtime features, it is not that hard to avoid having to use polyfills in the modern build altogether. Alternatively, consider using an on-demand service like Polyfill.io to only inject necessary polyfills based on actual browser user-agents (most modern browsers will need nothing!).
renderLegacyChunks
Type: boolean
Default: true
Set to false
to disable legacy chunks. This is only useful if you are using modernPolyfills
, which essentially allows you to use this plugin for injecting polyfills to the modern build only:
import legacy from '@vitejs/plugin-legacy'
export default {
plugins: [
legacy({
modernPolyfills: [
/* ... */
],
renderLegacyChunks: false
})
]
}
externalSystemJS
Type: boolean
Default: false
Defaults to false
. Enabling this option will exclude systemjs/dist/s.min.js
inside polyfills-legacy chunk.
The legacy plugin offers a way to use native import()
in the modern build while falling back to the legacy build in browsers with native ESM but without dynamic import support (e.g. Legacy Edge). This feature works by injecting a runtime check and loading the legacy bundle with SystemJs runtime if needed. There are the following drawbacks:
SyntaxError
in browsers without dynamic importPolyfill specifier strings for polyfills
and modernPolyfills
can be either of the following:
Any core-js
3 sub import paths - e.g. es/map
will import core-js/es/map
Any individual core-js
3 modules - e.g. es.array.iterator
will import core-js/modules/es.array.iterator.js
Example
import legacy from '@vitejs/plugin-legacy'
export default {
plugins: [
legacy({
polyfills: ['es.promise.finally', 'es/map', 'es/set'],
modernPolyfills: ['es.promise.finally']
})
]
}
The legacy plugin requires inline scripts for Safari 10.1 nomodule
fix, SystemJS initialization, and dynamic import fallback. If you have a strict CSP policy requirement, you will need to add the corresponding hashes to your script-src
list:
sha256-MS6/3FCg4WjP9gwgaBGwLpRCY6fZBgwmhVCdrPrNf3E=
sha256-tQjf8gvb2ROOMapIxFvFAYBeUJ0v1HCbOcSmDNXGtDo=
sha256-BoFUHKsYhJ9tbsHugtNQCmnkBbZ11pcW6kZguu+T+EU=
sha256-A18HC3jLpyEc9B8oyxq/NBFCyFBJFSsRLt0gmT9kft8=
These values (without the sha256-
prefix) can also be retrieved via
import { cspHashes } from '@vitejs/plugin-legacy'
When using the regenerator-runtime
polyfill, it will attempt to use the globalThis
object to register itself. If globalThis
is not available (it is fairly new and not widely supported, including IE 11), it attempts to perform dynamic Function(...)
call which violates the CSP. To avoid dynamic eval
in the absence of globalThis
consider adding core-js/proposals/global-this
to additionalLegacyPolyfills
to define it.
FAQs
Vite's default browser support baseline is [Native ESM](https://caniuse.com/es6-module), [native ESM dynamic import](https://caniuse.com/es6-module-dynamic-import), and [`import.meta`](https://caniuse.com/mdn-javascript_operators_import_meta). This plugin
The npm package @vitejs/plugin-legacy receives a total of 207,194 weekly downloads. As such, @vitejs/plugin-legacy popularity was classified as popular.
We found that @vitejs/plugin-legacy demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.