如何阻止文件、资源、文件夹被Rollup打包？Vite组件库构建

我正在用Vite构建组件库，需要将src/components下的部分文件夹以及public目录下的部分文件夹排除在Rollup输出包之外。目前已经通过JS过滤函数在componentEntries中指定特定入口文件，实现了部分文件夹的忽略，但public目录下的所有内容仍被打包到输出中。我的Vite配置代码如下：

export default defineConfig({
  plugins: [
    libInjectCss(),
    react(),
    dts({
      include: [
        "src/components/**/*.{ts,tsx}",
        "src/transport-icons/**/*.{ts,tsx}",
      ],
      exclude: ["**/*.stories.tsx"],

      beforeWriteFile: (filePath, content) => {
        if (
          filePath.includes("dist-storybook") ||
          filePath.includes(".stories.d.ts") ||
          filePath.includes("transport-icons")
        ) {
          return { filePath, content };
        }
        const [projectPath, chunkPath] = filePath.split("/dist/");
        const chunk = chunkPath?.split("/").pop();
        return { filePath: `${projectPath}/dist/${chunk}`, content };
      },
    }),
  ],

  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
  build: {
    cssCodeSplit: true,
    lib: {
      formats: ["es"],
      entry: [],
    },
    rollupOptions: {
      
      input: {
        ...componentEntries,
        GlobalCss: "./src/components/global.css",
      },

      external: ["react", "react-dom", "react/jsx-runtime"],
      output: {
        assetFileNames: (chunk) => {
          return `${camelCase(chunk.name)}`;
        },

        globals: {
          react: "React",
          "react-dom": "ReactDOM",
          "react/jsx-runtime": "react/jsx-runtime",
        },
      },
    },
  },
});

一、Rollup中排除文件/文件夹的核心逻辑 #

Rollup本身没有专门的「忽略」配置项，主要通过两种方式实现排除：

• 控制入口文件：不将需要忽略的文件/文件夹加入rollupOptions.input
• 标记外部依赖：通过rollupOptions.external将不需要打包的模块标记为外部依赖（仅适用于第三方包，不适用于本地文件）

二、完善src/components的文件夹排除 #

如果当前componentEntries的过滤逻辑不够严谨，可以通过glob模块在生成入口时直接排除指定文件夹：

1. 安装glob（未安装时执行）：

npm install glob --save-dev

2. 修改componentEntries生成逻辑，添加过滤规则：

import glob from 'glob';
import { resolve } from 'path';

// 生成组件入口，排除指定文件夹（示例：ignored-folder、demo）
const componentEntries = Object.fromEntries(
  glob.sync('src/components/**/*.tsx', {
    ignore: [
      'src/components/ignored-folder/**',
      'src/components/demo/**',
      '**/*.stories.tsx' // 顺带排除stories文件
    ]
  }).map(file => {
    // 生成入口名称（可根据需求调整）
    const entryName = file.split('/').slice(-2, -1)[0];
    return [entryName, resolve(__dirname, file)];
  })
);

同步更新dts插件的exclude配置，确保类型文件也排除对应文件夹：

dts({
  include: [
    "src/components/**/*.{ts,tsx}",
    "src/transport-icons/**/*.{ts,tsx}",
  ],
  exclude: [
    "**/*.stories.tsx",
    "src/components/ignored-folder/**",
    "src/components/demo/**"
  ],
  // 其他原有配置
})

三、解决public目录的文件排除问题 #

Vite默认会复制整个public目录到输出目录，要排除部分内容，需关闭默认行为，改用自定义复制逻辑：

1. 安装vite-plugin-static-copy插件：

npm install vite-plugin-static-copy --save-dev

2. 修改Vite配置，替换默认public复制规则：

import { viteStaticCopy } from 'vite-plugin-static-copy';

export default defineConfig({
  // 关闭Vite默认的public目录复制
  publicDir: false,
  plugins: [
    libInjectCss(),
    react(),
    dts({ /* 原有dts配置 */ }),
    // 自定义public文件复制，排除不需要的文件夹
    viteStaticCopy({
      targets: [
        {
          src: 'public/**/*', // 匹配public下所有文件
          dest: '.', // 复制到输出根目录（和默认行为一致）
          // 排除指定文件夹（示例：assets/ignored、demo）
          ignore: [
            'public/assets/ignored/**',
            'public/demo/**'
          ]
        }
      ]
    })
  ],
  // 其他原有配置
});

四、额外注意事项 #

• 若需排除单个文件，直接在ignore数组中添加具体路径即可，比如public/ignore-me.png
• 确保路径匹配规则正确，可利用glob语法调整（**表示任意层级目录）

内容的提问来源于stack exchange，提问作者Lahiru Lanka Rathnayaka