vite + vue3 接入 babel 的两种方式

最新推荐文章于 2024-12-29 20:21:55 发布

woai3c_

最新推荐文章于 2024-12-29 20:21:55 发布

阅读量8k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js rollup vite

本文链接：https://blog.csdn.net/q411020382/article/details/131381186

一、使用 `@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
}