# Banner 插件

提供为每个 JS 和 CSS 文件的顶部和底部注入内容的能力。

:::tip
从 `@modern-js/module-tools` MAJOR_VERSION.36.0 版本开始，该插件功能内置在 Modern.js Module 中，由 [`banner`](/api/config/build-config#banner) 和 [`footer`](/api/config/build-config#footer)
配置提供。
:::

## 快速开始

### 安装

import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @modern-js/plugin-module-banner -D" />

### 注册插件

在 Modern.js Module 中，你可以按照如下方式注册插件：

```ts
import { moduleTools, defineConfig } from '@modern-js/module-tools';
import { modulePluginBanner } from '@modern-js/plugin-module-banner';

export default defineConfig({
  plugins: [
    moduleTools(),
    modulePluginBanner({
      banner: {
        js: '//comment',
        css: '/*comment*/',
      },
    }),
  ],
});
```

:::tip
注意：CSS 的注释不支持 `//comment` 这样的写法。详见[「CSS 注释」](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Comments)
:::

## 示例

### 在 JS 文件顶部增加版权信息

```ts
import { modulePluginBanner } from '@modern-js/plugin-module-banner';
import { moduleTools, defineConfig } from '@modern-js/module-tools';

const copyRight = `/*
 © Copyright 2020 example.com or one of its affiliates.
 * Some Sample Copyright Text Line
 * Some Sample Copyright Text Line
 * Some Sample Copyright Text Line
 * Some Sample Copyright Text Line
 * Some Sample Copyright Text Line
 * Some Sample Copyright Text Line
*/`;

export default defineConfig({
  plugins: [
    moduleTools(),
    modulePluginBanner({
      banner: {
        js: copyRight,
      },
    }),
  ],
});
```

## 配置

- **类型：**

```ts
type BannerOptions = {
  banner: {
    js?: string;
    css?: string;
  };
  footer?: {
    js?: string;
    css?: string;
  };
};
```

### banner

在顶部增加内容。

- `banner.js`：在 JS 文件顶部增加内容。
- `banner.css`：在 CSS 文件顶部增加内容。

### footer

在底部增加内容。

- `footer.js`：在 JS 文件底部增加内容。
- `footer.css`：在 CSS 文件底部增加内容。