Skip to main content
Version: 4.0 (Current)

Plugin API

onActivated​

onActivated?: (cfg: Configuration) => void;

当插件被注册的时候会被触发。

参数​

  • cfg：当前的配置对象。

示例​

import { defineConfig, type Configuration } from '@dz-web/esboot';

export default defineConfig({
  plugins: [
    {
      key: 'plugin-key',
      onActivated: (cfg) => {
        console.log('My plugin is activated', cfg);
      },
    },
  ],
});

prepare​

prepare?: (cfg: Configuration) => void;

当执行esboot prepare的时候会被触发。

通常会做一些初始化操作，比如安装依赖，生成文件等。

参数​

  • cfg：当前的配置对象。

示例​

import { defineConfig, type Configuration, PluginHooks } from '@dz-web/esboot';

export default defineConfig({
  [PluginHooks.prepare]: [
    {
      key: 'plugin-key',
      prepare: (cfg) => {
        console.log('My plugin is prepared', cfg);
      },
    },
  ],
});

modifyConfig​

[PluginHooks.modifyConfig]?: (
    config: Configuration
) => Partial<Configuration>;

在读取完配置后执行，允许在配置被使用前进行修改。

参数​

  • config：当前的配置对象。
info

请不要直接修改 config 对象，这样是无效的。

示例​

假设我们有一个插件，它需要修改输出目录。

import { defineConfig, type Configuration } from '@dz-web/esboot';

export default defineConfig({
  plugins: [
    {
      key: 'plugin-key',
      modifyConfig: (config) => {
        return {
          output: {
            dir: 'dist-custom',
          },
        };
      },
    },
  ],
});

registerCommands​

[PluginHooks.registerCommands]?: (cfg: Configuration) => Command[];

注册命令。

参数​

  • cfg：当前的配置对象。

返回值​

  • Command[]：命令数组。
interface Command {
  name: string;
  description?: string;
  allowUnknownOption?: boolean;
  options?: string[];
  action: (...args: any[]) => void;
}

更多参数含义可以看commander。

示例​

import { defineConfig, type Configuration } from '@dz-web/esboot';

export default defineConfig({
  plugins: [
    {
      key: 'plugin-key',
      registerCommands: (cfg) => {
        return [
          {
            name: 'test',
            description: 'This is a test command',
            options: ['-f, --file <char>', '-s, --sampleFile <char>'],
            action: (options) => {
              // 在这里读到用户输入的参数 比如options.file
              console.log('This is a test command', options);
            },
          },
        ];
      },
    },
  ],
});

modifyTypescriptConfig​

[PluginHooks.modifyTypescriptConfig]?: (
  cfg: Configuration,
  tsconfig: NormalConfig
) => Partial<NormalConfig>;

prepare 阶段执行，用于修改生成的tsconfig.json内容。

参数​

  • config：当前的配置对象。
  • tsconfig：当前的 tsconfig 配置。

示例​

假设我们有一个插件，它需要修改 tsconfig 的baseUrl。

import { defineConfig, type Configuration } from '@dz-web/esboot';

export default defineConfig({
  plugins: [
    {
      key: 'plugin-key',
      modifyTypescriptConfig: (config, tsconfig) => {
        return {
          baseUrl: 'src',
        };
      },
    },
  ],
});

modifyPrettierConfig​

[PluginHooks.modifyPrettierConfig]?: (
  cfg: Configuration,
  prettierConfig: NormalConfig
) => Partial<NormalConfig>;

prepare 阶段执行，用于修改生成的prettier配置文件内容。

参数​

  • config：当前的配置对象。
  • prettierConfig：当前的 prettier 配置。

示例​

假设我们有一个插件，它需要修改 prettier 的tabWidth。

import { defineConfig, type Configuration } from '@dz-web/esboot';

export default defineConfig({
  plugins: [
    {
      key: 'plugin-key',
      modifyTypescriptConfig: (config, tsconfig) => {
        return {
          tabWidth: 2,
        };
      },
    },
  ],
});

modifyStylelintConfig​

[PluginHooks.modifyStylelintConfig]?: (
  cfg: Configuration,
  stylelintConfig: NormalConfig
) => Partial<NormalConfig>;

prepare 阶段执行，用于修改生成的stylelint配置文件内容。

参数​

  • config：当前的配置对象。
  • stylelintConfig：当前的 stylelint 配置。

示例​

假设我们有一个插件，它需要修改 stylelint 的一个 rule(max-nesting-depth)。

import { defineConfig, type Configuration } from '@dz-web/esboot';

export default defineConfig({
  plugins: [
    {
      key: 'plugin-key',
      modifyStylelintConfig: (config, stylelintConfig) => {
        return {
          rules: {
            'max-nesting-depth': 3,
          },
        };
      },
    },
  ],
});

modifyEslintConfig​

[PluginHooks.modifyEslintConfig]?: (
  cfg: Configuration,
  eslintConfig: NormalConfig
) => Partial<NormalConfig>;

prepare 阶段执行，用于修改生成的eslint配置文件内容。

参数​

  • config：当前的配置对象。
  • eslintConfig：当前的 eslint 配置。

示例​

假设我们有一个插件，它需要修改 eslint 的一个 rule(no-unused-vars)。

import { defineConfig, type Configuration } from '@dz-web/esboot';

export default defineConfig({
  plugins: [
    {
      key: 'plugin-key',
      modifyEslintConfig: (config, eslintConfig) => {
        return {
          rules: {
            'no-unused-vars': 'off',
          },
        };
      },
    },
  ],
});

modifyBundlerConfig​

[PluginHooks.modifyBundlerConfig]?: (
  cfg: Configuration,
  bundlerConfig: NormalConfig,
  bundlerName: string
) => void;

Bunder的dev/build 执行之前执行，用于修改当前bundler的配置文件。很类似于每个bundler的customConfig配置，但是plugin的好处是可以封装并且跨bundler。

参数​

  • config：当前的配置对象。
  • bundlerConfig：当前的 bundler 配置。
  • bundlerName：当前的 bundler 名称。

示例​

假设我们有一个插件，它需要修改 webpack 的output.publicPath。

import { defineConfig, type Configuration, PluginHooks } from '@dz-web/esboot';

export default defineConfig({
  plugins: [
    {
      key: 'plugin-key',
      [PluginHooks.modifyBundlerConfig]: (cfg, bundlerConfig, bundlerName) => {
        if (bundlerName === 'webpack') {
          bundlerConfig.output.publicPath = '/module';
        }
      },
    },
  ],
});

afterCompile​

[PluginHooks.afterCompile]?: (cfg: Configuration) => void;

dev/build 执行之后执行，用于在 bundler 编译之后做一些事情。

参数​

  • config：当前的配置对象。

示例​

假设我们有一个插件，它需要在编译之后提示当前编译的页面列表。

import { defineConfig, type Configuration, PluginHooks } from '@dz-web/esboot';

export default defineConfig({
  plugins: [
    {
      key: 'plugin-key',
      [PluginHooks.afterCompile]: (cfg) => {
        console.log(cfg.entry);
      },
    },
  ],
});