vue3 组件打包成umd和es格式-Toy模板网

这篇具有很好参考价值的文章主要介绍了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()

vue3 组件打包成umd和es格式

二、修改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"
  }
}

运行打包：

vue3 组件打包成umd和es格式

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

vue3 组件打包成umd和es格式文章来源地址https://www.toymoban.com/news/detail-505922.html