Rollup打包ESM模块时忽略仅做转导出的文件如何解决

安全阿岳

2026-8-27

问题原因

Rollup 内置的模块优化与 Tree Shaking 机制，会自动识别仅包含转导出（re-export）语句、无任何自有运行逻辑的桶文件（barrel file）。开启preserveModules: true配置时，如果这类中转文件的导出被上层入口直接引用，Rollup 会默认判定该文件属于无实际运行逻辑的冗余节点，直接跳过它的产物生成环节，将原本经过该文件的依赖链路打平，直接在上层引用文件中导入对应子模块，以此减少不必要的模块嵌套层级。
当前场景下的components.ts完全符合被优化的特征：整个文件只有从子组件转导出的语句，不存在自定义变量、函数执行、副作用逻辑等自有代码，因此被 Rollup 判定为可省略的中转节点，最终没有生成对应的components.js产物。

修复方案

方案1：关闭传递性导入提升配置
在output配置项中新增hoistTransitiveImports: false参数。该参数默认值为true，开启状态下会自动将中转模块的导入提升到最上层引用方，关闭后会保留完整的模块依赖链路，正常生成转导出文件的对应产物。配置示例：
```
output: [
  {
    dir: "./build",
    format: "esm",
    sourcemap: true,
    preserveModules: true,
    preserveModulesRoot: "src",
    hoistTransitiveImports: false // 新增配置
  },
],
```

方案2：为中转文件添加不可被优化移除的自有逻辑
如果不希望修改全局导入提升规则，可以在components.ts中添加任意不会被编译优化移除的自有逻辑，比如新增一个无业务影响的常量导出，让 Rollup 判定该文件不是纯中转的冗余文件，即可正常生成对应产物。示例代码：

// 新增无业务影响的自有导出，标记文件为非纯中转模块
export const __componentsBarrelFlag = Symbol('components-barrel');
// 原有转导出逻辑保持不变
export { default as BNButton } from "./BNButton/BNButton";
export { default as BNCard } from "./BNCard/BNCard";
export { default as BNDonutChart } from "./BNDonutChart/BNDonutChart";
export { default as BNFooter } from "./BNFooter/BNFooter";
export { default as BNHeader } from "./BNHeader/BNHeader";
export { default as BNInlineSvgIcon } from "./BNInlineSvgIcon/BNInlineSvgIcon";
export { default as BNJumpToNavigation } from "./BNJumpToNavigation/BNJumpToNavigation";
export { default as BNSideNavigation } from "./BNSideNavigation/BNSideNavigation";
export { default as BNTopMobileNavigation } from "./BNTopMobileNavigation/BNTopMobileNavigation";
export { default as BNTopNavigation } from "./BNTopNavigation/BNTopNavigation";

注意：不要给该文件添加/* @__PURE__ */类纯函数标记，否则仍会被 Rollup 判定为无副作用的纯中转文件被优化跳过。

方案3：通过manualChunks显式声明独立chunk
在 Rollup 配置中添加manualChunks规则，显式将components.ts指定为独立 chunk，强制 Rollup 为其生成独立产物文件。配置示例：

output: [
  {
    dir: "./build",
    format: "esm",
    sourcemap: true,
    preserveModules: true,
    preserveModulesRoot: "src",
    manualChunks(id) {
      // 匹配到目标components文件时指定为独立chunk
      if (id.endsWith('/Components/components.ts')) {
        return 'Components/components';
      }
    }
  },
],

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