@vitejs/plugin-legacy
pnpm i -D @vitejs/plugin-legacy
// vite.config.ts
const config = {
plugins: [
legacy({
targets: [
'> 1%',
'not ie 11',
'not op_mini all',
'chrome >= 78',
'edge >= 78',
'firefox >= 72',
'safari >= 13',
'opera >= 67',
],
}),
]
}
二、使用 @rollup/plugin-babel
vite 的 library
模式不支持 @vitejs/plugin-legacy
插件,所以只能使用 @rollup/plugin-babel
:
pnpm i -D @babel/plugin-transform-runtime @babel/preset-env @babel/runtime @rollup/plugin-babel
import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'path'
import type { ConfigEnv, UserConfigExport } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import svgLoader from 'vite-svg-loader'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
import babel from '@rollup/plugin-babel'
// https://vitejs.dev/config/
export default ({ command, mode }: ConfigEnv): UserConfigExport => {
const config: UserConfigExport = {
plugins: [vue(), vueJsx(), cssInjectedByJsPlugin(), svgLoader()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
build: {
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'IntegrationPlatformNavbar',
fileName: 'integration-platform-navbar',
},
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['vue', 'element-plus'],
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue',
'element-plus': 'ElementPlus',
},
},
plugins: [
babel({
extensions: ['.js', '.ts', '.vue'],
babelHelpers: 'runtime',
plugins: ['@babel/plugin-transform-runtime'],
presets: [
[
'@babel/preset-env',
{
useBuiltIns: false,
targets: {
browsers: ['last 2 versions', '> 1%', 'not ie <= 11'],
},
},
],
],
}),
],
},
},
}
return config
}