CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tarojs--cli

Command-line interface tool for Taro, a cross-platform framework that enables developers to build apps for Mini Programs, Web, and mobile platforms

Pending
Overview
Eval results
Files

plugin-development.mddocs/

Plugin Development

Plugin creation and management system for extending Taro functionality with custom build processes and platform support.

Capabilities

Plugin Class

Main class for creating Taro plugins with template scaffolding and configuration management.

/**
 * Plugin creation and management class extending Creator
 */
class Plugin extends Creator {
  conf: IPluginConf;
  
  /**
   * Initialize plugin creator with configuration
   * @param options - Plugin configuration options
   */
  constructor(options: IPluginConf);
  
  /**
   * Create plugin from template with scaffolding
   * @returns Promise that resolves when plugin creation completes
   */
  create(): Promise<void>;
  
  /**
   * Get CLI version for plugin metadata
   * @returns CLI version string
   */
  getCliVersion(): string;
}

Plugin Configuration

Complete configuration interface for plugin creation with all supported options.

/**
 * Plugin configuration interface
 */
interface IPluginConf {
  /** Name of the plugin */
  pluginName: string;
  /** Plugin type */
  type: string;
  /** Plugin description */
  description?: string;
  /** Directory where plugin will be created */
  projectDir: string;
  /** Project name (derived from directory) */
  projectName: string;
  /** Template to use for plugin creation */
  template: string;
  /** CLI version */
  version: string;
}

Usage Examples:

import { Plugin } from "@tarojs/cli";

// Create a platform plugin
const platformPlugin = new Plugin({
  pluginName: 'my-platform-plugin',
  type: 'platform',
  description: 'Custom platform support for Taro',
  projectDir: '/path/to/my-platform-plugin',
  projectName: 'my-platform-plugin',
  template: 'platform',
  version: '4.1.6'
});

await platformPlugin.create();

// Create a build plugin
const buildPlugin = new Plugin({
  pluginName: 'custom-build-plugin',
  type: 'build',
  description: 'Custom build process plugin',
  projectDir: '/path/to/build-plugin',
  projectName: 'custom-build-plugin',
  template: 'build',
  version: '4.1.6'
});

await buildPlugin.create();

Plugin Types

Different types of plugins supported by the Taro ecosystem with their specific roles.

/**
 * Supported plugin types
 */
type PluginType = 
  | 'platform'      // Platform-specific compilation support
  | 'build'         // Build process customization
  | 'framework'     // Framework integration
  | 'transform'     // Code transformation
  | 'analysis'      // Code analysis and linting
  | 'deploy'        // Deployment automation
  | 'dev-tools';    // Development tooling

/**
 * Plugin type configurations and capabilities
 */
interface PluginTypeConfig {
  platform: {
    purpose: 'Add support for new target platforms';
    hooks: ['onBuildStart', 'onBuildFinish', 'onGenerateProjectConfig'];
    examples: ['@tarojs/plugin-platform-weapp', '@tarojs/plugin-platform-h5'];
  };
  build: {
    purpose: 'Customize build pipeline and webpack configuration';
    hooks: ['onBuildStart', 'modifyWebpackChain', 'onBuildFinish'];
    examples: ['@tarojs/plugin-terser', '@tarojs/plugin-csso'];
  };
  framework: {
    purpose: 'Add support for new frontend frameworks';
    hooks: ['onParseCreateElement', 'onBuildStart'];
    examples: ['@tarojs/plugin-framework-react', '@tarojs/plugin-framework-vue3'];
  };
}

Plugin Templates

Available plugin templates for different plugin types and their structures.

/**
 * Plugin template structure
 */
interface PluginTemplate {
  'src/': {
    'index.ts': 'Main plugin entry point';
    'types.ts': 'Plugin type definitions';
    'utils.ts': 'Plugin utility functions';
  };
  'package.json': 'Plugin package configuration';
  'README.md': 'Plugin documentation';
  'tsconfig.json': 'TypeScript configuration';
  '.gitignore': 'Git ignore rules';
}

/**
 * Available plugin templates
 */
interface PluginTemplates {
  platform: 'Template for platform plugins';
  build: 'Template for build process plugins';
  framework: 'Template for framework integration plugins';
  transform: 'Template for code transformation plugins';
  default: 'Basic plugin template';
}

Plugin API Interface

Standard interface that Taro plugins must implement for integration with the build system.

/**
 * Standard Taro plugin interface
 */
interface TaroPlugin {
  /** Plugin name */
  name: string;
  /** Plugin version */
  version?: string;
  /** Plugin options */
  options?: Record<string, any>;
  
  /**
   * Plugin initialization function
   * @param api - Taro plugin API
   * @param options - Plugin configuration options
   */
  (api: PluginAPI, options?: Record<string, any>): void;
}

/**
 * Plugin API provided by Taro to plugins
 */
interface PluginAPI {
  /** Register hook listeners */
  onBuildStart(callback: () => void): void;
  onBuildFinish(callback: () => void): void;
  onGenerateProjectConfig(callback: (config: any) => any): void;
  
  /** Modify build configuration */
  modifyWebpackConfig(callback: (config: any) => any): void;
  modifyBuildAssets(callback: (assets: any) => any): void;
  
  /** Utility functions */
  getProjectName(): string;
  getProjectPath(): string;
  getCurrentPlatform(): string;
}

Plugin Development Workflow

Step-by-step guide for developing custom Taro plugins.

/**
 * Plugin development workflow steps
 */
interface PluginDevelopmentWorkflow {
  1: 'Define plugin purpose and type';
  2: 'Create plugin using Plugin class or template';
  3: 'Implement plugin interface and hooks';
  4: 'Test plugin with sample Taro project';
  5: 'Package and publish plugin to npm';
  6: 'Document plugin usage and configuration';
}

/**
 * Plugin testing utilities
 */
interface PluginTesting {
  /** Create test project for plugin validation */
  createTestProject(pluginPath: string): Promise<void>;
  /** Run build with plugin enabled */
  testBuild(platform: string): Promise<BuildResult>;
  /** Validate plugin output */
  validateOutput(expectedFiles: string[]): boolean;
}

Plugin Hooks System

Comprehensive hook system for plugin integration at different build stages.

/**
 * Available plugin hooks in Taro build lifecycle
 */
interface PluginHooks {
  /** Called before build process starts */
  onBuildStart: (callback: () => void) => void;
  
  /** Called after build process completes */
  onBuildFinish: (callback: (buildResult: BuildResult) => void) => void;
  
  /** Called when generating project configuration */
  onGenerateProjectConfig: (callback: (config: ProjectConfig) => ProjectConfig) => void;
  
  /** Called to modify webpack configuration */
  modifyWebpackConfig: (callback: (config: WebpackConfig) => WebpackConfig) => void;
  
  /** Called to modify build assets */
  modifyBuildAssets: (callback: (assets: BuildAssets) => BuildAssets) => void;
  
  /** Called to modify app entry */
  modifyAppEntry: (callback: (entry: string) => string) => void;
  
  /** Called during code transformation */
  onParseCreateElement: (callback: (nodePath: NodePath) => void) => void;
}

/**
 * Build result interface for hook callbacks
 */
interface BuildResult {
  success: boolean;
  platform: string;
  outputPath: string;
  duration: number;
  errors?: string[];
  warnings?: string[];
}

Plugin Configuration Schema

Schema for plugin configuration validation and documentation.

/**
 * Plugin configuration schema
 */
interface PluginConfigSchema {
  /** Plugin identifier */
  name: string;
  /** Plugin configuration options */
  options?: {
    [key: string]: {
      type: 'string' | 'boolean' | 'number' | 'object' | 'array';
      required?: boolean;
      default?: any;
      description: string;
    };
  };
}

/**
 * Example plugin configuration
 */
const examplePluginConfig: PluginConfigSchema = {
  name: 'my-custom-plugin',
  options: {
    enabled: {
      type: 'boolean',
      default: true,
      description: 'Enable or disable the plugin'
    },
    outputPath: {
      type: 'string',
      required: true,
      description: 'Output directory for plugin files'
    },
    transforms: {
      type: 'array',
      default: [],
      description: 'List of transformations to apply'
    }
  }
};

Plugin Publishing

Guidelines and utilities for publishing plugins to npm registry.

/**
 * Plugin publishing checklist
 */
interface PluginPublishingChecklist {
  packageJson: 'Complete package.json with correct metadata';
  readme: 'Comprehensive README with usage examples';
  types: 'TypeScript definition files for API';
  tests: 'Unit tests covering plugin functionality';
  examples: 'Example projects demonstrating plugin usage';
  license: 'Open source license file';
  changelog: 'Version history and changes';
}

/**
 * Recommended package.json structure for plugins
 */
interface PluginPackageJson {
  name: string;
  version: string;
  description: string;
  main: 'dist/index.js';
  types: 'dist/index.d.ts';
  keywords: ['taro', 'plugin', 'mini-program'];
  peerDependencies: {
    '@tarojs/cli': '^4.0.0';
  };
  files: ['dist', 'README.md'];
}

Install with Tessl CLI

npx tessl i tessl/npm-tarojs--cli

docs

cli.md

configuration.md

diagnostics.md

index.md

page-creation.md

plugin-development.md

project-creation.md

utilities.md

tile.json