1.安装依赖

确保安装Vite

1
npm install vite --save-dev

安装和Rollup相关的依赖

1
npm install @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup --save-dev
  • plugin-commonjs用于处理CommonJS 模块
  • plugin-node-resolve用于解析模块路径

2.创建 Rollup 配置文件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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文件内容如下：

1
2
3
4
5
6
7
8
9
import { defineConfig } from 'vite';
import rollupConfig from './rollup.config.js';


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

4.package.json配置

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

1
2
3
"scripts": {
  "build": "rollup -c"
}
  • -c: 指定rollup配置文件路径

5.运行build命令

1
npm run build

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