For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt, and this page is available as Markdown at /zh/configure/app/source/entries.md.
  • 简体中文
  • source.entries

    • 类型:
    type Entries = Record<
      string,
      | string
      | {
          entry: string;
          disableMount?: boolean;
        }
    >;
    • 默认值: 根据当前项目的目录结构计算出的入口对象。

    用于配置自定义页面入口。

    何时使用

    对于大部分场景,Modern.js 根据目录结构自动生成的入口已经可以满足需求,具体可参考入口。

    如果你需要自定义页面入口时,可以通过该选项进行设置。

    String 类型

    当 entries 对象的 value 为 string 类型时,表示入口模块的文件路径:

    modern.config.ts
    import { defineConfig } from '@modern-js/app-tools';
    
    export default defineConfig({
      source: {
        entries: {
          // 指定一个名称为 'my-entry' 的新入口
          'my-entry': './src/home/test/index.ts',
        },
        // 禁用默认入口扫描
        disableDefaultEntries: true,
      },
    });

    默认情况下,配置的入口等价于 App.tsx,即指定的入口文件只需要导出应用的根组件。

    例如以下目录结构:

    .
    ├── src
    │   └── entry
    │       ├── chat.tsx
    │       └── home.tsx
    └── package.json

    上述目录不符合 Modern.js 的目录结构约定,因此,Modern.js 在分析目录结构时,不会得到任何默认入口。

    在不想改变目录结构的情况下(如项目迁移),可以通过 source.entries 自定义入口:

    modern.config.ts
    export default defineConfig({
      source: {
        entries: {
          home: './src/entry/home.tsx',
          chat: './src/entry/chat.tsx',
        },
        // 禁用默认入口扫描
        disableDefaultEntries: true,
      },
    });

    Object 类型

    当值为 Object 时,可配置如下属性:

    • entry:string,入口文件路径。
    • disableMount:boolean = false,关闭 Modern.js 自动生成入口代码的行为。
    modern.config.ts
    import { defineConfig } from '@modern-js/app-tools';
    
    export default defineConfig({
      source: {
        entries: {
          'my-entry': {
            // 入口文件路径
            entry: './src/my-page/index.tsx',
            disableMount: true,
          },
        },
        // 禁用默认入口扫描
        disableDefaultEntries: true,
      },
    });

    禁用入口文件生成

    默认情况下,配置的入口等价于 App.tsx,Modern.js 会自动生成一个入口文件来引用你配置的入口。

    如果你希望禁用 Modern.js 自动生成入口文件的逻辑,可以将 disableMount 属性设置为 true。

    modern.config.ts
    export default defineConfig({
      source: {
        entries: {
          'my-entry': {
            entry: './src/my-page/index.tsx',
            disableMount: true,
          },
        },
        // 禁用默认入口扫描
        disableDefaultEntries: true,
      },
    });

    约定式路由

    如果你需要为某个自定义入口启用约定式路由,可以将 entry 设置为目录路径:

    modern.config.ts
    import { defineConfig } from '@modern-js/app-tools';
    
    export default defineConfig({
      source: {
        entries: {
          // 启用约定式路由
          entry_spa: {
            // 约定式路由的入口路径必须设置为目录
            entry: './src/about',
          },
        },
        // 禁用默认入口扫描
        disableDefaultEntries: true,
      },
    });

    入口合并规则

    在设置 source.entries 后,如果没有设置 disableDefaultEntries: true,Modern.js 会将自定义入口与分析目录结构得到的入口合并。

    合并规则为:

    • 比较自定义入口设置的入口路径和默认入口路径,当入口路径一致时,自定义入口会覆盖默认入口。

    例如以下目录结构:

    .
    ├── src
    │   ├── chat
    │   │   └── App.tsx
    │   └── home
    │       └── index.ts
    └── package.json

    Modern.js 会分析 src/ 目录,得到默认入口 chat 和 home。当用户在 modern.config.ts 文件中配置如下时:

    modern.config.ts
    import { defineConfig } from '@modern-js/app-tools';
    
    export default defineConfig({
      source: {
        entries: {
          index: './src/home/index.ts',
        },
      },
    };

    可以看到自定义入口 index 的路径和默认入口 home 的路径一致,在合并的过程中,index 会覆盖掉 home,最终入口如下:

    • chat -> ./src/chat/App.tsx
    • index -> ./src/home/index.ts