如何在Rollup.js生成的压缩JS文件中正确添加Banner？

问题原因分析 #

• 内置output.banner被Terser移除：Terser默认会压缩掉普通注释，Rollup内置banner如果是无特殊标记的文本或注释，会被Terser过滤。
• rollup-plugin-banner报错：该插件未正确处理sourcemap，导致Rollup提示sourcemap损坏。

解决方案 #

方案1：使用内置output.banner + Terser保留注释配置 #

这是最简洁的方案，无需额外插件，只需给Banner添加特殊注释标记并配置Terser保留该类注释：

1. 将Banner内容包裹在/*! ... */中（Terser默认保留带!的注释）
2. 在Terser插件中配置保留对应注释

// rollup.config.js
const BANNER = `/*! 项目名称 v1.0.0 | MIT License */`;

export default {
  // 其他入口、外部依赖等配置
  output: {
    banner: BANNER,
    sourcemap: true,
    // 其他输出配置（如format、file等）
  },
  plugins: [
    terser({
      // 配置Terser保留以!开头的注释
      comments: /^!/
    })
  ]
};

方案2：使用支持Sourcemap的Banner插件 #

如果偏好使用插件，可替换为rollup-plugin-add-comment（该插件会正确处理sourcemap）：

1. 安装插件

npm install rollup-plugin-add-comment --save-dev

2. 配置Rollup

// rollup.config.js
import addComment from 'rollup-plugin-add-comment';

const BANNER = `/*! 项目名称 v1.0.0 | MIT License */`;

export default {
  // 其他配置
  output: {
    sourcemap: true,
    // 其他输出配置
  },
  plugins: [
    terser({
      comments: /^!/
    }),
    addComment({
      banner: BANNER
    })
  ]
};

方案3：自定义支持Sourcemap的Banner插件 #

如果不想依赖第三方插件，可手动编写简单插件，借助magic-string确保sourcemap正确：

1. 依赖安装

npm install magic-string --save-dev

2. 编写插件并配置

// rollup.config.js
import MagicString from 'magic-string';

const addBanner = (banner) => ({
  name: 'add-banner',
  transform(code) {
    const s = new MagicString(code);
    s.prepend(`${banner}\n`);
    return {
      code: s.toString(),
      map: s.generateMap({ hires: true })
    };
  }
});

const BANNER = `/*! 项目名称 v1.0.0 | MIT License */`;

export default {
  // 其他配置
  output: {
    sourcemap: true,
    // 其他输出配置
  },
  plugins: [
    addBanner(BANNER),
    terser({
      comments: /^!/
    })
  ]
};

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