Maybe your Vite project needs work on IE11 or other not support ESM legacy browsers, this plugin can help you!
This is only for development.
# npm
npm i vite-plugin-legacy-dev -D
# or yarn
yarn add vite-plugin-legacy-dev -D
# or pnpm
pnpm i vite-plugin-legacy-dev -D
Add the plugin to your Vite
config. For example:
vite.config.ts
import { defineConfig } from 'vite'
import legacyDev from 'vite-plugin-legacy-dev'
export default defineConfig({
plugins: [
legacyDev()
]
})
When you access then HTML entry file, this plugin will:
- Inject core-js@3(bundle) polyfill.
- Inject feach API polyfill.
- Inject webcomponents polyfill.
- Change
<script type="module">
to<script type="systemjs-module">
and inject systemjs(Dynamic ES module loader).
Next, the plugin will use Babel to transform your js/ts code to SystemJS module(the process can be slow when transform large files).
If you are interested in this project, your ideas are welcome!