93 lines
2.4 KiB
Markdown
93 lines
2.4 KiB
Markdown
|
---
|
|||
|
|
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` 等）
|