Modern.js Module
指南
API
插件
指南
API
插件
简体中文

Banner 插件

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

TIP

从 @modern-js/module-tools 2.36.0 版本开始，该插件功能内置在 Modern.js Module 中，由 banner 和 footer 配置提供。

快速开始

安装

npm
yarn
pnpm
bun
npm add @modern-js/plugin-module-banner -D

注册插件

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

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 注释」

示例

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

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,
      },
    }),
  ],
});

配置

  • 类型：
type BannerOptions = {
  banner: {
    js?: string;
    css?: string;
  };
  footer?: {
    js?: string;
    css?: string;
  };
};

在顶部增加内容。

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

footer

在底部增加内容。

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