实际场景可能需要多个入口文件,多个 bundle 输出文件,这个功能不复杂,通过遍历多个vite build构建即可实现,代码大致如下: import { build } from 'vite'; const buildPs = lastBuildOptions.map((buildOption) => { return build({ ...viteConfig, // 透传 vite.config.ts 或者 vite.config.js 的用户配置,插...
npm install vite-build-libshell 或者 yarnaddvite-build-libshell 2.引入 Vite 构建库 安装完成后,可以在项目中的入口文件(通常是main.js或index.js)中引入 Vite 构建库。引入的方式如下: import{ createBuild }from'vite-build-lib';javascript 3.创建构建配置 在引入 Vite 构建库后,需要创建一个构建配置文...
mode})=>{return{build:{target:"es2015",lib:{entry:{v1:path.join('./src/v1'),v2:path.join('./src/v2'),},formats:['es','cjs'],fileName(format,entryName,...rest){return`index.${format}.${entryName}.${format==='es'?
"dev": "vite", "build": "vite build --mode project", "lib": "vite build --mode lib", "serve": "vite preview" } 1. 2. 3. 4. 5. 6. 这样就可以把不同的环境完全分开了,如果有其他的需求,还可以增加更多的模式。 更改后的打包命令 yarn dev // 开发环境 yarn build // 打包发布到网...
build: { lib: { entry: 'src/index.ts', name: 'MyLibrary', fileName: 'my-library' }, rollupOptions: { external: ['vue'], output: { globals: { vue: 'Vue' } } } } } 在上述配置中,我们指定了构建的入口文件为`src/index.ts`,同时指定了构建出的组件库的名称为`MyLibrary`,导出的文...
//启用/禁用 CSS 代码拆分,如果指定了 build.lib,build.cssCodeSplit 会默认为 false cssCodeSplit: true, /* 构建后是否生成 source map 文件, boolean | 'inline' | 'hidden' 默认:false true: 创建一个独立的 source map 文件 inline: source map 将作为一个 data URI 附加在输出文件中 ...
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' // 主要用于alias文件路径别名 // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], // 打包配置 build: { lib: { entry: resolve(__dirname, 'lib/main....
https://cn.vitejs.dev/config/#build-lib 技术栈 vite rollup 打包方式 vue-cli 自带的是 webpack 的打包方式,打出的包体积有点大,而 vite 自带的是 rollup 的打包方式,这种方式打包的体积就非常小,官网也有一些使用说明,所以学会之后还是比较很方便的。
看到了它的解析文件,说明vite对他进行解析转换了,就好比weback的babel-loader的功能,那么vite是依赖什么进行转换的呢,没错就是esbuild。 vite使用esbuild来作为例如( TSX & TypeScript)部分文件类型的解析器,它的解析与编译与webpack是不同的。webpack是提前将所有文件编译为浏览器可以接受的类型,而vite则是在接收...
const input =// 如果设置了 build.lib 对象,则对 build.lib 进行处理,需要支持多入口构建libOptions? options.rollupOptions?.input ||(typeof libOptions.entry === 'string'? resolve(libOptions.entry): Array.isArray(libOptions.entry)? libOptions.entry.map(resolve): Object.fromEntries(Object.entries...