source.entries#

• Type:

type Entries = Record<
  string,
  | string
  | {
      entry: string;
      disableMount?: boolean;
      customBootstrap?: string;
    }
>;

• Default: The entry object calculated based on the directory structure of the current project.

Used to configure custom page entries.

String#

When the value of the entries object is of type string, it represents the file path of the entry module:

import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  source: {
    entries: {
      // Specify a new entry named 'my-entry'
      'my-entry': './src/home/test/index.ts',
    },
    disableDefaultEntries: true,
  },
});

By default, the configured entry is equivalent to App.[jt]sx, which means that the specified entry file only needs to export the root component of the application.

For example, the following directory structure:

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

The above directory does not conform to the directory structure convention of Modern.js, so Modern.js will not get any default entries when analyzing the directory structure.

If you do not want to change the directory structure (such as project migration), you can customize the entry through source.entries:

export default defineConfig({
  source: {
    entries: {
      home: './src/entry/home.tsx',
      chat: './src/entry/chat.tsx',
    },
    disableDefaultEntries: true,
  },
});

Object#

When the value is Object, the following attributes can be configured:

• entry: string, the entry file path.
• disableMount: boolean = false, disable Modern.js's behavior of automatically generating entry code.
• customBootstrap: string = '', specify the file path of custom Bootstrap.

import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  source: {
    entries: {
      'my-entry': {
        // entry file path
        entry: './src/my-page/index.tsx',
        disableMount: true,
      },
    },
    // Disable default entry scanning
    disableDefaultEntries: true,
  },
});

Disable entry file generation#

By default, the configured entry is equivalent to App.[jt]sx, and Modern.js will automatically generate an entry file to reference the entry you configured.

If you want to disable the logic of Modern.js automatically generating entry files, you can set the disableMount property to true.

export default defineConfig({
  source: {
    entries: {
      'my-entry': {
        entry: './src/my-page/index.tsx',
        disableMount: true,
      },
    },
    // Disable default entry scanning
    disableDefaultEntries: true,
  },
});

Conventional Routing#

If you need to enable conventional routing for a custom entry, you can set entry to a directory path:

import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  source: {
    entries: {
      // enable conventional routing
      entry_spa: {
        // The entry path of conventional routing must be set to a directory
        entry: './src/about',
      },
    },
    // Disable default entry scanning
    disableDefaultEntries: true,
  },
});

Entry Merge Rules#

After setting source.entries, if disableDefaultEntries: true is not set, Modern.js will merge the custom entry with the entry obtained by analyzing the directory structure.

The merge rule is:

• Compare the entry paths set by the custom entry setting and the default entry path. When the entry paths are the same, the custom entry will override the default entry.

For example, the following directory structure:

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

Modern.js will analyze the src/ directory and get the default entries chat and home. When the user configures as follows in the modern.config.ts file:

import { defineConfig } from '@modern-js/app-tools';

export default defineConfig({
  source: {
    entries: {
      index: './src/home/index.ts',
    },
  },
};

It can be seen that the path of the custom entry index is the same as the path of the default entry home. During the merge process, index will override home, and the final entry is as follows:

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