Vue3+Ts打包依赖库记录

前言

vue-cli 自带的是 webpack 的打包方式，打出的包体积有点大，而 vite 自带的是 rollup 的打包方式，这种方式打包的体积就非常小，官网也有一些使用说明，所以学会之后还是比较很方便的。

依赖

依赖名称	依赖版本	依赖说明
vite	^2.9.9	vue快速构建工具
@vitejs/plugin-vue	^2.3.3	vite支持打包vue插件
@vitejs/plugin-vue-jsx	^1.3.10	vite支持打包vue-jsx语法插件
autoprefixer	^10.4.7	自动给css加上各浏览器前缀
vite-plugin-dts	^1.2.0	打包类型声明文件
postcss-flexbugs-fixes	^5.0.2	修复浏览器flex的一些bug

详细配置

// vite.config.js
import {
   defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import autoprefixer from 'autoprefixer';
import pff from 'postcss-flexbugs-fixes';
import dts from 'vite-plugin-dts';

import path from 'path';
import {
   name} from './package.json';

export default defineConfig({
   
    css: {
   
        postcss: {
   
            plugins: [autoprefixer({
   
                overrideBrowserslist: [
                    "defaults",
                    "not ie < 8",
                    "last 2 versions",
                    "> 1%",
                    "iOS 7",
                    "last 3 iOS versions"
                ],
                grid: true,
            }), pff]
        }
    },
    plugins: [vue(), vueJsx(), dts()],
    resolve: {
   
        alias: {
   
            '@': '/src'
        },
    },
    build: {
   
        minify: "terser",
        brotliSize: true,
        sourcemap: false,
        terserOptions: {
   
            compress: {
   
                drop_console: true,
                drop_debugger: true
            },
            keep_classnames: true,
        },
        lib: {
   
            entry: path.resolve(__dirname, 'src/index.ts'),
            name,
            formats: ['es', 'cjs', 'umd'],
            fileName: (format) => `${
     name}.${
     format}.js`
        },
        // assetsDir: 'assets',
        outDir: 'dist',
        rollupOptions: {
   
            external: [
                'vue',
                'vuex',
                'vue-router',
                'axios',
                'moment',
                'mitt',
                'js-cookie',
                'crypto-js/aes',
                'crypto-js/enc-utf8',
                'crypto-js/pad-pkcs7',
                'crypto-js/mode-ecb',
                'crypto-js/md5',
                'crypto-js/enc-utf8',
                'crypto-js/enc-base64',
                'ant-design-vue',