---
name: jjb-path-alias-resources
description: 定义 JJB 项目路径别名与资源管理规范。在配置导入路径、使用 ~ 别名或管理图片/音频/视频/字体等静态资源时使用。统一使用 ~ 作为 src 目录别名。
---

# 应用配置与开发环境

## 路径别名与资源管理

### 文件别名与路径规范

- **路径别名**：统一使用 `~` 作为 `src` 目录的别名

  - 示例：`import { NS_GLOBAL } from '~/enumerate/namespace';`

  - 说明：`~` 指向 `src` 目录，所有导入路径应使用此别名以保持一致性

### 图片和文件资源

- **导入方式**：使用 ESM 方式导入图片和文件资源

- **资源导入示例**：

  ```javascript
  // 图片
  import logo from '~/assets/image/logo.png';

  // 音频
  import audio from '~/assets/media/audio.mp3';

  // 视频
  import video from '~/assets/media/video.mp4';

  // 字体 ttf
  import font1 from '~/assets/file/font.ttf';

  // 字体 woff
  import font2 from '~/assets/file/font.woff';

  // 字体 eot
  import font3 from '~/assets/file/font.eot';
  ```

- **使用导入的资源**：

  ```javascript
  // 使用图片
  function App1() {
    return <img src={logo} alt="Logo" />;
  }

  // 使用视频
  function App2() {
    return <video src={video} controls />;
  }
  ```

- **资源类型支持**：

  - **图片资源**：支持 `.png`、`.jpg`、`.jpeg`、`.gif`、`.svg`、`.webp` 等常见图片格式

  - **媒体资源**：支持 `.mp3`、`.mp4`、`.wav`、`.ogg` 等音频和视频格式

  - **字体资源**：支持 `.ttf`、`.woff`、`.woff2`、`.eot` 等字体文件格式

  - **其他文件**：支持其他静态资源文件，如 `.pdf`、`.txt` 等

- **路径规范**：

  - 所有资源文件应放在 `src/assets/` 目录下，按类型分类存放

  - 推荐目录结构：

    ```
    src/
    └── assets/
        ├── images/      # 图片资源
        ├── media/      # 音频、视频资源
        └── fonts/       # 字体及其他文件资源
    ```

  - 导入时统一使用路径别名 `~` 指向 `src` 目录

- **注意事项**：

  - 资源文件导入后，构建工具会自动处理文件路径和文件名（包含 hash），确保资源正确加载

  - 导入的资源变量可以直接在 JSX 中使用，无需额外处理

  - 建议为图片添加 `alt` 属性，提升可访问性

  - 视频和音频资源建议添加相应的控制属性（如 `controls`、`autoplay` 等）