Alias#

Modern.js allow aliases in JS and CSS, and the following aliases are built in:

{
  '@': '<appDirectory>/src',
  '@shared': '<appDirectory>/shared',
}

For example, import the modules from the src/common/ directory in the src/App.tsx file:

.
├── common
│   ├── styles
│   │   └── base.css
│   └── utils
│       └── index.ts
├── App.tsx

the code in src/App.tsx:

import utils from '@/src/common/utils';
import '@/src/common/styles/base.css';

Modern.js also provides a way to config aliases. Adding the @common alias as an example. For TypeScript projects, you only need to configure compilerOptions.paths under the project root directory tsconfig.json as follows:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@/common/*": ["./src/common/*"]
    }
  }
}

JavaScript project can config by source.alias in modern.config.js:

export default defineConfig({
  source: {
    alias: {
      '@common': './src/common',
    },
  },
});

For detailed usage, please refer to source.alias documentation.