如何在Vite中打包CommonJS模块？以Flickity依赖为例

你的问题出在错误地将Flickity的UMD打包文件作为Rollup单独入口，导致内部的require语句未被转换。以下是具体原因和解决办法：

核心原因 #

Flickity的flickity.pkgd.min.js是预打包的UMD格式文件，内部包含了针对Node.js/AMD/浏览器的环境判断代码，其中的require("jquery")嵌套在IIFE的条件分支里。Rollup的@rollup/plugin-commonjs默认只处理模块依赖树中顶层的CommonJS语法，不会主动解析嵌套在IIFE内部的require语句——尤其是当这个文件被当作独立入口时，Rollup不会对其进行深度模块转换。

解决方案 #

方案1：通过npm安装并引入（推荐） #

放弃本地的pkgd文件，直接通过npm安装官方包，让Vite自动处理依赖转换：

1. 安装Flickity：

npm install flickity

2. 在你的script.ts中引入：

import Flickity from 'flickity';
// 如需jQuery桥接，额外引入：
// import 'flickity/js/flickity.jquery';

3. 移除vite.config中rollupOptions.input里的flickity入口项。

这种方式下，Vite会自动解析Flickity的模块依赖，将内部的CommonJS语法转换为浏览器兼容的ES模块，同时正确处理jQuery依赖（若需使用jQuery桥接，需提前安装jquery包）。

方案2：保留本地pkgd文件，调整引入方式 #

如果必须使用本地的flickity.pkgd.min.js：

1. 在script.ts中引入该文件作为依赖，而非单独入口：

import './flickity/flickity.pkgd.min.js';

2. 修改vite.config.js，移除rollupOptions.input中的flickity入口；同时增强commonjs配置，明确指定处理该文件：

export default defineConfig({
    // ...其他配置
    build: {
        // ...其他build配置
        commonjsOptions: {
            extensions: extensions,
            include: /flickity/, // 明确匹配flickity相关文件
            transformMixedEsModules: true, // 开启混合模块转换，适配UMD格式
        },
    },
    // ...其他配置
});

将pkgd文件作为依赖引入后，Rollup会将其纳入模块依赖树，@rollup/plugin-commonjs会深度解析内部代码，转换嵌套的require语句。

额外注意点 #

• 你的配置中mode设为了"Development"，生产打包建议改为"production"，避免开发模式下的未优化代码。
• 若使用jQuery桥接，需确保jquery包已安装，且Vite能正确解析它（可在resolve.alias中添加jquery的别名，确保路径正确）。

内容的提问来源于stack exchange，提问作者Eliazar