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"}
}

运行打包：

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.jsvite 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格式相关推荐

使用svelte+webpack 打包成umd形式的js库
使用svelte写js库 js库在项目中遇到需要整理的通用js的方法,比如统一获取用户信息或者获取当前的URL等等,这些使用js class都可以一把梭,直接干就完了. 但最近需求要提供统一的toa ...
Vue3组件库打包指南，一次生成esm、esm-bundle、commonjs、umd四种格式
读完本篇,你可以了解到如何将组件库打包成各种格式上一篇里提到了启动服务前会先进行一下组件库的打包,运行的命令为: varlet-cli compile 显然是varlet-cli提供的一个命令: 处 ...
从0搭建Vue3组件库(五): 如何使用Vite打包组件库
本篇文章将介绍如何使用 vite 打包我们的组件库,同时告诉大家如何使用插件让打包后的文件自动生成声明文件(*.d.ts) 打包配置 vite 专门提供了库模式的打包方式,配置其实非常简单,首先全局安 ...
php打包运行不了,python,_python打包成exe格式后，在部分机子上没法运行，python - phpStudy...
python打包成exe格式后,在部分机子上没法运行使用py2exe将python脚本打包成exe格式. 生成好后,本地运行start.exe可以正常运行.但是放到其他的机子上,部分机子没法运行该e ...
vue打包成组件lib
目录 1.设置打包入口 2.设置package.json 3.部署方式1.发布到私有npm库(比如nexus等) 方式2.将代码上传到代码仓库 1.设置打包入口 // 在项目中新建 lib.js 作 ...
python打包zip文件_python 解压文件，合并文件打包成zip格式文件生成MD5值
#!/usr/bin/env python #_*_encoding:utf-8 # 2018/05/29 #augustyang #2.0 ''' 解压文件,合并文件打包成zip格式文件生成MD ...
关于springmvc下服务器文件打包成zip格式下载功能
关于springmvc下服务器文件打包成zip格式下载功能 2016年09月21日 11:22:14 toxic_guantou 阅读数:5731更多个人分类: 技术点存储版权声明:本文为博主原创 ...
python封装exe后其机器能用么_python打包成exe格式后，在部分机子上没法运行
使用py2exe将python脚本打包成exe格式. 生成好后,本地运行start.exe可以正常运行.但是放到其他的机子上,部分机子没法运行该exe.不知道是什么原因.该如何解决. 没法运行的时候, ...
打包php程序为安装文件,zblogphp主题和插件怎么打包成.zba格式文件
把zblogphp的主题或插件打包成.zba格式文件,相当于把主题或插件下载到我们的电脑中,且格式是zblogphp网站程序专用的.zba格式,因为zblogphp只支持zba格式文件的主题和插件上传 ...

vue3 组件打包成umd和es格式

vue3 组件打包成umd和es格式相关推荐

最新文章

热门文章