vue3 组件打包成umd和es格式

一、新建：build.js

// bin/build.js
// node包，commonjs规范
const path = require('path')
const { defineConfig, build } = require('vite')
const vue = require('@vitejs/plugin-vue') 


const entryDir = path.resolve(__dirname, './src/components')

const outDir = path.resolve(__dirname, './lib')

// vite基础配置
const baseConfig = defineConfig({
  configFile: false,
  publicDir: false,
  plugins: [vue()]
})

const rollupOptions = {
  // 不想打包进库的依赖
  external: [
    'vue'
  ],
  output: {
    //UMD构建模式下为这些外部化的依赖提供一个全局变量
    globals: {
      vue:'Vue'
    }
  }
}
// 全量打包构建
const buildAll = async () => {
  await build({
    ...baseConfig,
    build: {
      rollupOptions,
      lib: {
        entry: path.resolve(entryDir, 'index.ts'),
        name: 'SaaSComponents', // umd的变量名
        fileName: (format) => `saas-components.${format}.js`, // 输出文件名
        formats: ['es', 'umd'],
        
      },
      outDir,
      minify:false
    }
  })
}
const buildLib = async () => {
  await buildAll()
}
buildLib()

 二、修改package.json

{
  "name": "vue3_cli_default",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
	"build:components": "node --trace-warnings ./build.js",
	"lib": "npm run build:components"
  },
  "dependencies": {
    "element-plus": "^2.2.10",
    "vue": "^3.2.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.6.0",
    "@vue/compiler-sfc": "^3.2.6",
    "vite": "^2.5.2"
  }
}

运行打包：

文章来源地址https://uudwc.com/A/wJqPO

PS D:\Projects\HBuilderProjects\saas-plugin> cd D:\Projects\HBuilderProjects\saas-plugin | npm run lib

> vue3_cli_default@0.0.0 lib D:\Projects\HBuilderProjects\saas-plugin
> npm run build:components

> vue3_cli_default@0.0.0 build:components D:\Projects\HBuilderProjects\saas-plugin
> node --trace-warnings ./build.js

vite v2.5.3 building for production...
✓ 3 modules transformed.
lib/saas-components.es.js   1.24 KiB / brotli: 0.49 KiB
lib/saas-components.umd.js   1.63 KiB / brotli: 0.59 KiB