or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-service.mdconfiguration.mdindex.mdplugin-system.mdtesting.md
tile.json

tessl/npm-umi

Enterprise-level, plugin-based React application framework with out-of-the-box functionality including routing, building, deployment, testing, and linting capabilities

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/umi@4.4.x

To install, run

npx @tessl/cli install tessl/npm-umi@4.4.0

index.mddocs/

Umi

Umi is an enterprise-level, plugin-based React application framework designed to provide a simple and enjoyable web development experience. It offers out-of-the-box functionality including built-in routing, building, deployment, testing, and linting capabilities. The framework is battle-tested in enterprise environments, being used by 10,000+ applications at companies like Alibaba, Tencent, ByteDance, NetEase, and Meituan.

Package Information

  • Package Name: umi
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install umi

Core Imports

import { defineConfig, defineMock, run, Service, RUNTIME_TYPE_FILE_NAME } from "umi";

For CommonJS:

const { defineConfig, defineMock, run, Service, RUNTIME_TYPE_FILE_NAME } = require("umi");

Client-side plugin imports:

import { PluginManager, ApplyPluginsType } from "umi/client";

Testing utilities:

import { configUmiAlias, getUmiAlias } from "umi/test";

Basic Usage

import { defineConfig } from "umi";

// Define configuration with TypeScript support
export default defineConfig({
  routes: [
    { path: "/", component: "@/pages/index" },
    { path: "/users", component: "@/pages/users" },
  ],
  plugins: ["@umijs/plugin-react"],
  devServer: {
    port: 3000,
  },
});

Architecture

Umi is built around several key components:

  • Core Service: Central service class that manages the application lifecycle, plugins, and configuration
  • Plugin System: Extensible plugin architecture with both server-side and client-side plugin management
  • CLI Interface: Command-line tools for development, building, and deployment
  • Configuration System: Type-safe configuration with helper functions
  • Testing Integration: Built-in testing utilities with alias resolution and Jest configuration
  • Build System: Dual build engines (Vite and Webpack) with performance optimizations

Capabilities

Configuration Management

Type-safe configuration system with helper functions for defining app configuration and mock data. Essential for setting up routing, plugins, build options, and development settings.

function defineConfig(config: ConfigType): ConfigType;
function defineMock(mockData: { [key: string]: MockDeclare }): typeof mockData;

Configuration

CLI and Service Management

Command-line interface and service management for running development servers, building applications, and executing framework commands.

function run(opts?: IOpts): Promise<void>;

class Service extends CoreService {
  constructor(opts?: any);
  run2(opts: { name: string; args?: any }): Promise<any>;
}

CLI and Service

Plugin System

Comprehensive plugin system supporting both server-side and client-side plugins with hook management, plugin registration, and execution control.

enum ApplyPluginsType {
  compose = "compose",
  modify = "modify", 
  event = "event"
}

class PluginManager {
  constructor(opts: { validKeys: string[] });
  register(plugin: IPlugin): void;
  applyPlugins(opts: ApplyPluginsOpts): any;
  static create(opts: { validKeys: string[]; plugins: IPlugin[] }): PluginManager;
}

Plugin System

Testing Utilities

Testing integration utilities for Jest configuration, alias resolution, and umi-specific testing setup.

function configUmiAlias(config: Config.InitialOptions): Promise<Config.InitialOptions>;
function getUmiAlias(): Promise<Record<string, string>>;
function getAliasPathWithKey(alias: Record<string, string>, key: string): string;

Testing

Types

// Main plugin API interface
interface IApi extends PluginAPI, IServicePluginAPI {
  // Extensive plugin API with add, modify, and event methods
}

// Route configuration
interface IRoute {
  path: string;
  component?: string;
  routes?: IRoute[];
  exact?: boolean;
  [key: string]: any;
}

// API request/response classes for API routes
class UmiApiRequest {
  params: Record<string, string>;
  body: any;
  headers: Record<string, string>;
  method: string;
  query: Record<string, string | string[]>;
  cookies: Record<string, string>;
  url: string;
  pathName: string;
  readBody(): Promise<any>;
}

class UmiApiResponse {
  status(code: number): UmiApiResponse;
  header(key: string, value: string): UmiApiResponse;
  setCookie(key: string, value: string): UmiApiResponse;
  end(data?: string): void;
  text(data: string): void;
  html(data: string): void;
  json(data: any): void;
}

// Configuration types
type ConfigType = IConfigFromPlugins & IConfig;

// Mock data types
type MockDeclare = string | number | null | undefined | boolean | Record<string, any> | RequestHandler;

// CLI options
interface IOpts {
  presets?: string[];
}

// Plugin interfaces
interface IPlugin {
  path?: string;
  apply: Record<string, any>;
}

interface ApplyPluginsOpts {
  key: string;
  type: ApplyPluginsType;
  initialValue?: any;
  args?: object;
  async?: boolean;
}