目标:通过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
问题:不会将第三方依赖构建到输出的文件里,这种方式无法满足需求。