Vue 组件打包记录

一、打包脚本

const path = require('path')
const fs = require('fs')
const { build, defineConfig } = require('vite')
const vue = require('@vitejs/plugin-vue')
const dts = require('vite-plugin-dts')
const DefineOptions = require('unplugin-vue-define-options/vite')
const rootDir = path.resolve(__dirname, '../')
const outDir = resolve(rootDir+'/src/genius/dist')
const baseConfig = defineConfig({
  plugins: [
    DefineOptions(),
    dts({
      include: ['./src/packages/utils','./src/packages/genius', './src/packages/components'],
      outputDir: path.resolve(outDir, 'types')
    })
  ],
  build: {
    lib: {
      entry: resolve('./src/packages/index.ts'),
      name: 'genius',
      fileName: format => `index.${format}.js`
    },
    outDir,
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue',"cesium","element-plus"],
      output: {
        format:['cjs','es','umd','life'],
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'vue',
          cesium:'cesium'
        }
      }
    }
  }
})

main()
async function main() {
  // build
  await build(baseConfig)
  await copyFiles()
}
async function copyFiles() {
  fs.copyFileSync(
    resolve('./src/packages/package.json'),
    resolve('./src/genius/package.json')
  )
}
function resolve(...urlOrUrls) {
  console.log(rootDir);
  return path.resolve(rootDir, ...urlOrUrls)
}

二、package.json 配置

  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "pac": "node ./scripts/build.js",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
  },

npm run pac 打包命令

三、登录包管理服务器

四、发版