使用vite配置rollup

1.安装依赖

确保安装Vite

npm install vite --save-dev

安装和Rollup相关的依赖

npm install @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup --save-dev

plugin-commonjs用于处理CommonJS 模块
plugin-node-resolve用于解析模块路径

2.创建 Rollup 配置文件

在根目录创建rollup.config.js文件,内容如下：

import { defineConfig } from 'rollup';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default defineConfig({
  input: 'src/main.js', // 你的入口文件路径，根据实际情况修改
  output: {
    file: 'dist/bundle.js', // 输出文件路径和名称，可按需调整
    format: 'esm' // 输出模块格式，可以是 'esm'、'cjs'、'umd' 等，这里以ES模块为例
  },
  plugins: [
    resolve(),
    commonjs()
  ]
});

input: 指定入口文件路径
output: 指定输出文件路径和名称，以及模块格式
plugins: 使用插件处理模块
format: 指定输出模块格式: esm、cjs、umd

esm、cjs、umd三种格式的区别

esm: 使用ES模块格式
cjs: 使用CommonJS模块格式
umd: 使用UMD模块格式

3.根目录创建vite.config.js文件

vite.config.js文件内容如下：

import { defineConfig } from 'vite';
import rollupConfig from './rollup.config.js';


export default defineConfig({
  build: {
    rollupOptions: rollupConfig
  }
});

4.package.json配置

在package.json文件中添加build脚本

"scripts": {
  "build": "rollup -c"
}

-c: 指定rollup配置文件路径

5.运行build命令

npm run build

— 注意必须在package.json文件中将type设置为module