Modern.js Module
Guide
API
Plugins
Guide
API
Plugins

Banner Plugin

Provide the ability to inject content at the top and bottom of each JS and CSS file.

Quick Start

Install

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

Register

You can install the plugin with the following command:

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

Note: CSS comments do not support the //comment syntax. Refer to "CSS Comments"

Example

Add copyright information at the top of a JS file

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

Configuration

  • Type
type BannerOptions = {
  banner: {
    js?: string;
    css?: string;
  };
  footer?: {
    js?: string;
    css?: string;
  };
};

Add content at the top.

  • banner.js: Add content at the top of a JS file.
  • banner.css: Add content at the top of a CSS file.

footer

Add content at the bottom.

  • footer.js: Add content at the bottom of a JS file.
  • footer.css: Add content at the bottom of a CSS file.