简体中文

别名

Modern.js 允许在 JS 和 CSS 中使用别名导入自定义目录下的模块，并内置了以下别名:

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

INFO

在开启可选功能时，生成器也会动态的添加内置别名，例如启用 BFF 时默认会添加 @api 别名。

例如从 src/App.tsx 文件中导入 src/common 目录下的模块：

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

src/App.tsx 中写法如下：

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

Modern.js 也提供了自定义别名的方式，以添加 @common 别名为例，对于 TypeScript 项目，只需要在项目根目录 tsconfig.json 下配置 compilerOptions.paths 如下：

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

JavaScript 项目可以在 modern.config.js 中配置 source.alias：

modern.config.ts

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

对于别名配置的具体用法，请参考 source.alias 文档。

BFF