CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-umi-types

TypeScript type definitions for the Umi framework plugin development and configuration

—

Pending
Overview
Eval results
Files

configuration.mddocs/

Configuration

Type definitions for Umi configuration options, webpack settings, routing, static exports, SSR, and plugin configuration. Provides complete type safety for Umi configuration files.

Capabilities

Main Configuration Interface

The primary configuration interface extending AF-Webpack configuration options.

/**
 * Main Umi configuration interface extending AF-Webpack configuration
 */
interface IConfig extends IAFWebpackConfig {
  // Basic config
  block?: object;
  chainWebpack?: IChangeWebpackConfigFunc<IWebpackChainConfig, IAFWebpackConfig>;
  context?: object;
  disableRedirectHoist?: boolean;
  exportStatic?: boolean | IExportStaticOpts;
  outputPath?: string;
  plugins?: IPlugin[];
  routes?: IRoute[] | null;
  runtimePublicPath?: boolean | string;
  singular?: boolean;
  mock?: IMockOpts;
  treeShaking?: boolean;
  dva?: any;
  locale?: any;

  // Implemented in plugins
  base?: string;
  history?: 'browser' | 'hash' | 'memory';
  mountElementId?: string;
  targets?: {
    [key: string]: number;
  };
  ssr?: IExportSSROpts;
}

Usage Examples:

import { IConfig } from 'umi-types';

const config: IConfig = {
  // Basic configuration
  outputPath: './dist',
  history: 'browser',
  base: '/app/',
  
  // Plugin configuration
  plugins: [
    'umi-plugin-react',
    ['umi-plugin-dva', { immer: true }],
  ],
  
  // Routing configuration
  routes: [
    { path: '/', component: './pages/index' },
    { path: '/users', component: './pages/users' },
  ],
  
  // Static export options
  exportStatic: {
    htmlSuffix: true,
    dynamicRoot: true,
  },
  
  // Webpack configuration
  alias: {
    '@': './src',
    'components': './src/components',
  },
  
  // Development server
  devServer: {
    port: 8000,
    host: 'localhost',
  },
  
  // Build options
  hash: true,
  minimizer: 'terserjs',
  
  chainWebpack(config, { webpack }) {
    config.resolve.alias.set('@utils', './src/utils');
    return config;
  },
};

export default config;

Plugin Configuration

Plugin definition and management types.

/**
 * Plugin definition - can be a string or tuple with options
 */
type IPlugin<T = any> = string | [string, T];

Usage Examples:

import { IPlugin } from 'umi-types';

// String-based plugin
const stringPlugin: IPlugin = 'umi-plugin-react';

// Plugin with options
const pluginWithOptions: IPlugin<{ dva: boolean }> = [
  'umi-plugin-react',
  { dva: true, antd: true }
];

// Array of plugins
const plugins: IPlugin[] = [
  'umi-plugin-react',
  ['umi-plugin-dva', { immer: true }],
  ['umi-plugin-locale', { antd: true }],
];

Route Configuration

Route definition and nested routing configuration.

/**
 * Route configuration interface for defining application routes
 */
interface IRoute {
  path?: string;
  component?: ReactNode;
  routes?: IRoute[];
  Routes?: string[];
  redirect?: string;
  [key: string]: any;
}

Usage Examples:

import { IRoute } from 'umi-types';

const routes: IRoute[] = [
  {
    path: '/',
    component: './layouts/BasicLayout',
    routes: [
      { path: '/home', component: './pages/Home' },
      { path: '/users', component: './pages/Users' },
      {
        path: '/admin',
        component: './layouts/AdminLayout',
        Routes: ['./routes/PrivateRoute'],
        routes: [
          { path: '/admin/dashboard', component: './pages/Admin/Dashboard' },
          { path: '/admin/users', component: './pages/Admin/Users' },
        ],
      },
    ],
  },
  {
    path: '/login',
    component: './pages/Login',
  },
  {
    path: '/404',
    component: './pages/404',
  },
  {
    path: '*',
    redirect: '/404',
  },
];

AF-Webpack Configuration

Comprehensive webpack configuration options for Umi applications.

/**
 * AF-Webpack configuration interface with all webpack-related options
 */
interface IAFWebpackConfig {
  alias?: object;
  autoprefixer?: object;
  babel?: object;
  browserslist?: string[];
  chainConfig?: any;
  copy?: any[];
  cssLoaderOptions?: any;
  cssModulesExcludes?: string[];
  cssModulesWithAffix?: boolean;
  cssnano?: object;
  cssPublicPath?: string;
  generateCssModulesTypings?: boolean;
  define?: object;
  devServer?: object;
  devtool?: string | false;
  disableCSSModules?: boolean;
  disableCSSSourceMap?: boolean;
  disableDynamicImport?: boolean;
  disableGlobalVariables?: boolean;
  cssLoaderVersion?: 1 | 2;
  entry?: any;
  env?: object;
  es5ImcompatibleVersions?: boolean;
  externals?: ExternalsElement;
  extraBabelIncludes?: Condition[];
  extraBabelPlugins?: any[];
  extraBabelPresets?: any[];
  extraPostCSSPlugins?: any[];
  hash?: boolean;
  ignoreMomentLocale?: boolean;
  lessLoaderOptions?: any;
  manifest?: any;
  minimizer?: 'uglifyjs' | 'terserjs';
  outputPath?: string;
  proxy?: object | [object, Function];
  publicPath?: string;
  sass?: object;
  terserJSOptions?: object;
  theme?: string | object;
  tsConfigFile?: string;
  typescript?: object;
  uglifyJSOptions?: object;
  urlLoaderExcludes?: Condition[];
}

Usage Examples:

import { IAFWebpackConfig } from 'umi-types';

const webpackConfig: IAFWebpackConfig = {
  // Path and output configuration
  outputPath: './dist',
  publicPath: '/static/',
  
  // Code splitting and bundling
  hash: true,
  minimizer: 'terserjs',
  
  // CSS configuration
  disableCSSModules: false,
  cssModulesWithAffix: true,
  cssModulesExcludes: [
    /node_modules/,
    /global\.css$/,
  ],
  
  // Babel configuration
  extraBabelPlugins: [
    ['import', { libraryName: 'antd', style: true }],
  ],
  extraBabelPresets: [
    ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
  ],
  
  // Module resolution
  alias: {
    '@': './src',
    'components': './src/components',
    'utils': './src/utils',
  },
  
  // Development server
  devServer: {
    port: 8000,
    host: '0.0.0.0',
    https: false,
  },
  
  // Proxy configuration
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },
  
  // Environment variables
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    'process.env.API_URL': JSON.stringify(process.env.API_URL),
  },
  
  // Theme configuration (for antd)
  theme: {
    'primary-color': '#1890ff',
    'link-color': '#1890ff',
    'success-color': '#52c41a',
  },
  
  // Copy static files
  copy: [
    { from: 'public', to: 'static' },
    { from: 'assets/images', to: 'images' },
  ],
  
  // External libraries
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};

Static Export Configuration

Configuration for static site generation and export options.

/**
 * Static export configuration options
 */
interface IExportStaticOpts {
  htmlSuffix?: boolean;
  dynamicRoot?: boolean;
}

SSR Configuration

Server-side rendering configuration with external library management.

/**
 * SSR export configuration with external whitelist options
 */
type IExportSSROpts =
  | {
      externalWhitelist?: WhitelistOption[];
      nodeExternalsOpts?: object;
      manifestFileName?: string;
      disableExternal?: boolean;
      disableExternalWhiteList?: string[] | object;
    }
  | boolean;

type WhitelistOption = string | RegExp;

Usage Examples:

import { IExportSSROpts } from 'umi-types';

// Enable basic SSR
const basicSSR: IExportSSROpts = true;

// Advanced SSR configuration
const advancedSSR: IExportSSROpts = {
  // Whitelist libraries that should be bundled
  externalWhitelist: [
    /^antd/,
    'lodash',
    /^@babel\/runtime/,
  ],
  
  // Custom manifest file name
  manifestFileName: 'ssr-manifest.json',
  
  // Disable external library exclusion
  disableExternal: false,
  
  // Configure webpack-node-externals
  nodeExternalsOpts: {
    allowlist: ['antd', /^lodash/],
  },
};

Mock Configuration

Development mock server configuration options.

/**
 * Mock server configuration options
 */
interface IMockOpts {
  exclude?: string[] | string;
}

Usage Examples:

import { IMockOpts } from 'umi-types';

const mockConfig: IMockOpts = {
  exclude: [
    'mock/auth.js',    // Exclude specific mock file
    'mock/admin/**/*', // Exclude all admin mock files
  ],
};

Webpack Chain Configuration

Type for webpack-chain configuration function.

/**
 * Webpack configuration change function using webpack-chain
 * @param webpackConfig - Webpack chain configuration object
 * @param AFWebpack - AF-Webpack utilities including webpack instance
 * @returns Modified configuration or void
 */
interface IChangeWebpackConfigFunc<T, U> {
  (webpackConfig: T, AFWebpack: { webpack: U }): T | void;
}

Usage Examples:

import { IChangeWebpackConfigFunc, IWebpackChainConfig, IAFWebpackConfig } from 'umi-types';

const chainWebpack: IChangeWebpackConfigFunc<IWebpackChainConfig, IAFWebpackConfig> = (
  config,
  { webpack }
) => {
  // Add custom loader
  config.module
    .rule('custom-loader')
    .test(/\.custom$/)
    .use('custom-loader')
    .loader(require.resolve('./custom-loader'))
    .end();

  // Modify resolve configuration
  config.resolve.alias
    .set('@components', './src/components')
    .set('@utils', './src/utils');

  // Add webpack plugin
  config.plugin('custom-plugin')
    .use(webpack.DefinePlugin, [{
      CUSTOM_DEFINE: JSON.stringify('custom-value'),
    }]);

  // Modify optimization
  config.optimization
    .splitChunks({
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    });

  return config;
};

Install with Tessl CLI

npx tessl i tessl/npm-umi-types

docs

configuration.md

index.md

internationalization.md

plugin-development.md

ui-components.md

tile.json