构建lib项目-vite,rollup

devtools/2024/12/22 20:31:32/

目标:通过vite构建一个项目工程,能够构建出一个index.js的库。同时,能够将第三方的依赖打进包里。

基本步骤:

1. npm init -y 创建一个工程

2. 安装vite依赖

3. 创建vite.config.js配置文件

4. package.json的main字段配置  "main": "index.js",

5. package.json的script字段添加执行脚本:    "build": "vite build"

vite.config.js配置文件:

javascript">import {defineConfig} from 'vite'export default defineConfig({build:{minify:true,target:'modules',lib:{entry:"src/index.js",fileName:`aksk`,formats:['iife'],name:'aksk'},}
})

build: vite的构建配置,这里的配置都是打包构建相关,和本地起服务没有关系

        build.target:设置最终构建的浏览器兼容目标。默认值是‘modules’ ,兼容支持原生ES模块、原生ESM动态导入和import.meta的浏览器。 该值包含一系列的值,['es2020','edge88','firefox78','chrome87','safari14']。其他值,可以是一个ES版本,例如es2015;浏览器版本,例如:chrome58

        build.lib: 配置打包构建库的相关配置

                entry: string | string[] , 数组类型表示可以支持多个入口文件

                name:是构建后库文件对外暴露的全局变量,并且在formats是umd和iife的时候是必须的。、export的都会作为全局变量的属性进行访问。

               formats: 默认是['es','umd'] , 如果是多入口,则默认是['es','cjs']

                filename: 输出的包文件名。默认是package.json的name选项

       build.rollupOptions:

                external: 该选项用于排除在bundle外部的模块。它的值可以是一个参数为模块id,返回值是布尔类型的函数,也可以是一个模块id的数组或正则表达式。模块id是指,import "dependency.js" 那么,模块id就是dependency.js, 如果要标记 import "dependency",那么模块id为dependency。

          可以配置 /node_modules/ 正则表达式,需要使用@rollup/plugin-node-resolve 的插件。

                            如果一个相对引入,即以 ./ 或 ../ 开头,被标记为 external,rollup 将在内部将该模块 ID 解析为绝对路径,以便引入的不同外部模块可以合并。当写入生成的 bundle 后,这些引入模块将再次被转换为相对引入。即,使用绝对路径可以将多个页面引入的相对路径可以标识为一个。

                           注意:当创建 iife 或 umd 格式的 bundle 时,你需要通过 output.globals 选项提供全局变量名,以替换掉外部引入。

        

        

直接使用rollup构建:

操作: rollup对于ESM模块可以不用配置文件,直接通过rolllup的命令直接打包,并且会进行tree-shaking,如下:

javascript">npx rollup main.js --file bundle.js --format iife

问题:不会将第三方依赖构建到输出的文件里,这种方式无法满足需求。


http://www.ppmy.cn/devtools/144469.html

相关文章

lvs介绍与应用

LVS介绍 LVS(Linux Virtual Server)是一种基于Linux操作系统的虚拟服务器技术,主要用于实现负载均衡和高可用性。它通过将客户端请求分发到多台后端服务器上,从而提高整体服务的处理能力和可靠性。lvs是基于集群的方式实现 集群…

Linux网络基础--传输层Tcp协议(上) (详细版)

目录 Tcp协议报头: 4位首部长度: 源端口号和目的端口号 32位序号和确认序号 标记位 超时重传机制: 两个问题 连接管理机制 三次握手,四次挥手 建立连接,为什么要有三次握手? 先科普一个概念&…

ubuntu22.04编译安装Opencv4.8.0+Opencv-contrib4.8.0教程

本章教程,主要记录在Ubuntu22.04版本系统上编译安装安装Opencv4.8.0+Opencv-contrib4.8.0的具体过程。 一、下载opencv和opencv-contrib包 wget https://github.com/opencv/opencv/archive/refs/tags/4.8.0.zip wget https://github.com/opencv/opencv_contrib/archive/refs/…

雅思真题短语梳理(四)

61方面 which aspects of the story 62变化 alter least 63更重要 more central / more important 64人物 the characters in it 65伪装 in disguise 66琐碎的 trivial details 67代代相传 reproduced from generation to generation 68嗜血、阴森的一面 blood-thirsty and gru…

相机与NAS的奇妙组合,如何使用相机拍照自动上传或备份到NAS

相机与NAS的奇妙组合,如何使用相机拍照自动上传或备份到NAS 哈喽小伙伴们好,我是Stark-C~ 对于喜欢使用专业器材拍照摄影的小伙伴来说,想要将相机存储卡中的照片或视频导出到电脑上,要么是使用数据线直接和相机连接,…

Java 单元测试中 JSON 相关的测试案例

Java 单元测试中 JSON 相关的测试案例 在 Java 单元测试中,处理 JSON 数据的场景非常常见,通常包括生成 JSON 数据、解析 JSON 数据,以及验证其内容是否符合预期。以下详细讲解相关的测试用例、工具和实现方法。 1. 常用 JSON 库 在 Java 中…

Redis List操作

Redis List操作 1、lPush 在名称为key的list左边(头)添加一个值为value的 元素 $redis->lPush(key, value);2、rPush 在名称为key的list右边(尾)添加一个值为value的 元素 $redis->rPush(key, value);3、lPushx/rPushx 在名…

前端数据持久化指南:LocalStorage、SessionStorage 等的区别与应用

一、引言 在前端开发中,数据持久化是一个至关重要的需求。它能够确保用户在不同页面切换、刷新页面或者关闭浏览器后,数据仍然能够被保存和恢复。本文将详细介绍几种实现前端数据持久化的方法,并深入分析它们之间的区别。 二、实现前端数据…