vite打包组件库

vite.config.js

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// vite.config.ts
import vueJsx from '@vitejs/plugin-vue-jsx'
// @ts-ignore
import path from "path";
import { resolve } from 'path';
// @ts-ignore
import monacoEditorPlugin from "vite-plugin-monaco-editor";


function pathResolve(dir: string) {
  return resolve(process.cwd(), '.', dir);
}
const baseApi = 'dev-api'

export default defineConfig({
  plugins: [
    [
      vueJsx(),
      vue(),
    ]],
  build: {
    target: 'es2015',
    outDir: 'lib',
    lib: {
      name: 'es',
      entry: './src/out.ts',
      formats: ['es']
    },
    rollupOptions: {
      input: ['./src/out.ts'],
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        dir: 'lib',
        entryFileNames: '[name].js',
        // file: 'dist/library.esm.js',
        format: 'es',
        exports: 'named',
      },
    },// rollup打包配置
  },
})

rollup选项

1. 声明第三方依赖

声明第三方依赖后，该依赖就不会打包到目标文件中

external: ['vue', 'pinia', ...],

2. format
   编译后文件格式， es|umd,amd,cjs...

vite build选项

1. lib [必须]
   可参考官方文档

lib: {
      name: 'es',
      entry: './src/out.ts',
      formats: ['es']
    },