asset-gen-cli 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +150 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,132 @@
|
|
|
1
1
|
# asset-gen
|
|
2
2
|
|
|
3
|
+
<details open>
|
|
4
|
+
<summary>English</summary>
|
|
5
|
+
|
|
6
|
+
Generate TypeScript asset index files from image directories for frontend projects.
|
|
7
|
+
|
|
8
|
+
## Installation
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
npm install -g asset-gen-cli
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Quick Start
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
# 1. Create a config file interactively
|
|
18
|
+
asset-gen init
|
|
19
|
+
|
|
20
|
+
# 2. Generate asset files
|
|
21
|
+
asset-gen gen
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Commands
|
|
25
|
+
|
|
26
|
+
### `asset-gen init`
|
|
27
|
+
|
|
28
|
+
Creates `asset-gen.config.json` interactively and generates asset files immediately.
|
|
29
|
+
|
|
30
|
+
- Select language (English / 한국어 / 中文)
|
|
31
|
+
- Enter and confirm the asset directory path
|
|
32
|
+
- Enter and confirm the output file path
|
|
33
|
+
- Select a naming convention
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
asset-gen init # Interactive setup
|
|
37
|
+
asset-gen init --force # Overwrite an existing config file
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### `asset-gen gen` / `asset-gen generate`
|
|
41
|
+
|
|
42
|
+
Reads the config file and generates an asset index file and TypeScript declaration file.
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
asset-gen gen
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Generated Output
|
|
49
|
+
|
|
50
|
+
Given these files in `src/assets/`:
|
|
51
|
+
|
|
52
|
+
```txt
|
|
53
|
+
src/assets/
|
|
54
|
+
├── logo.png
|
|
55
|
+
├── user-profile.png
|
|
56
|
+
└── banner.webp
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Running `asset-gen gen` creates:
|
|
60
|
+
|
|
61
|
+
**`src/assets/index.ts`** (generated)
|
|
62
|
+
|
|
63
|
+
```ts
|
|
64
|
+
import banner from "./banner.webp";
|
|
65
|
+
import logo from "./logo.png";
|
|
66
|
+
import userProfile from "./user-profile.png";
|
|
67
|
+
|
|
68
|
+
export const assets = {
|
|
69
|
+
banner,
|
|
70
|
+
logo,
|
|
71
|
+
userProfile,
|
|
72
|
+
} as const;
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
**`src/assets/asset-gen.d.ts`** (generated to prevent TypeScript import errors)
|
|
76
|
+
|
|
77
|
+
```ts
|
|
78
|
+
declare module "*.png" {
|
|
79
|
+
const src: string;
|
|
80
|
+
export default src;
|
|
81
|
+
}
|
|
82
|
+
// ...
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Config File
|
|
86
|
+
|
|
87
|
+
`asset-gen.config.json`
|
|
88
|
+
|
|
89
|
+
| Field | Type | Default | Description |
|
|
90
|
+
| ------------ | ---------------------- | ----------------------------------- | -------------------------- |
|
|
91
|
+
| `language` | `"en" \| "ko" \| "zh"` | `"en"` | CLI output language |
|
|
92
|
+
| `input` | `string` | `"./src/assets"` | Asset directory to scan |
|
|
93
|
+
| `output` | `string` | `"./src/assets/index.ts"` | File path to generate |
|
|
94
|
+
| `extensions` | `string[]` | `["png","jpg","jpeg","webp","svg"]` | File extensions to track |
|
|
95
|
+
| `naming` | `string` | `"camelCase"` | Variable naming convention |
|
|
96
|
+
|
|
97
|
+
### Naming Conventions
|
|
98
|
+
|
|
99
|
+
| Option | Example |
|
|
100
|
+
| ---------------------- | -------------- |
|
|
101
|
+
| `camelCase` | `userProfile` |
|
|
102
|
+
| `PascalCase` | `UserProfile` |
|
|
103
|
+
| `snake_case` | `user_profile` |
|
|
104
|
+
| `SCREAMING_SNAKE_CASE` | `USER_PROFILE` |
|
|
105
|
+
| `original` | `user-profile` |
|
|
106
|
+
|
|
107
|
+
## Duplicate Key Detection
|
|
108
|
+
|
|
109
|
+
If multiple files resolve to the same variable name, the command exits with an error.
|
|
110
|
+
|
|
111
|
+
```txt
|
|
112
|
+
Duplicate asset key detected: userProfile
|
|
113
|
+
- user-profile.png
|
|
114
|
+
- user_profile.png
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## Requirements
|
|
118
|
+
|
|
119
|
+
- Node.js >= 18.0.0
|
|
120
|
+
|
|
121
|
+
## License
|
|
122
|
+
|
|
123
|
+
MIT
|
|
124
|
+
|
|
125
|
+
</details>
|
|
126
|
+
|
|
127
|
+
<details>
|
|
128
|
+
<summary>한국어</summary>
|
|
129
|
+
|
|
3
130
|
TypeScript 프론트엔드 프로젝트에서 이미지 파일을 스캔하여 import 문과 타입 안전한 상수 객체를 자동 생성하는 CLI 도구입니다.
|
|
4
131
|
|
|
5
132
|
## 설치
|
|
@@ -46,7 +173,7 @@ asset-gen gen
|
|
|
46
173
|
|
|
47
174
|
`src/assets/` 폴더에 아래 파일들이 있을 때:
|
|
48
175
|
|
|
49
|
-
```
|
|
176
|
+
```txt
|
|
50
177
|
src/assets/
|
|
51
178
|
├── logo.png
|
|
52
179
|
├── user-profile.png
|
|
@@ -56,10 +183,11 @@ src/assets/
|
|
|
56
183
|
`asset-gen gen` 실행 시:
|
|
57
184
|
|
|
58
185
|
**`src/assets/index.ts`** (자동 생성)
|
|
186
|
+
|
|
59
187
|
```ts
|
|
60
|
-
import banner from
|
|
61
|
-
import logo from
|
|
62
|
-
import userProfile from
|
|
188
|
+
import banner from "./banner.webp";
|
|
189
|
+
import logo from "./logo.png";
|
|
190
|
+
import userProfile from "./user-profile.png";
|
|
63
191
|
|
|
64
192
|
export const assets = {
|
|
65
193
|
banner,
|
|
@@ -69,8 +197,9 @@ export const assets = {
|
|
|
69
197
|
```
|
|
70
198
|
|
|
71
199
|
**`src/assets/asset-gen.d.ts`** (자동 생성 — TypeScript 오류 방지)
|
|
200
|
+
|
|
72
201
|
```ts
|
|
73
|
-
declare module
|
|
202
|
+
declare module "*.png" {
|
|
74
203
|
const src: string;
|
|
75
204
|
export default src;
|
|
76
205
|
}
|
|
@@ -81,29 +210,29 @@ declare module '*.png' {
|
|
|
81
210
|
|
|
82
211
|
`asset-gen.config.json`
|
|
83
212
|
|
|
84
|
-
| 필드
|
|
85
|
-
|
|
86
|
-
| `language`
|
|
87
|
-
| `input`
|
|
88
|
-
| `output`
|
|
89
|
-
| `extensions` | `string[]`
|
|
90
|
-
| `naming`
|
|
213
|
+
| 필드 | 타입 | 기본값 | 설명 |
|
|
214
|
+
| ------------ | ---------------------- | ----------------------------------- | ---------------- |
|
|
215
|
+
| `language` | `"en" \| "ko" \| "zh"` | `"en"` | CLI 출력 언어 |
|
|
216
|
+
| `input` | `string` | `"./src/assets"` | 스캔할 에셋 폴더 |
|
|
217
|
+
| `output` | `string` | `"./src/assets/index.ts"` | 생성할 파일 경로 |
|
|
218
|
+
| `extensions` | `string[]` | `["png","jpg","jpeg","webp","svg"]` | 추적할 확장자 |
|
|
219
|
+
| `naming` | `string` | `"camelCase"` | 변수 네이밍 규칙 |
|
|
91
220
|
|
|
92
221
|
### 네이밍 규칙
|
|
93
222
|
|
|
94
|
-
| 옵션
|
|
95
|
-
|
|
96
|
-
| `camelCase`
|
|
97
|
-
| `PascalCase`
|
|
98
|
-
| `snake_case`
|
|
223
|
+
| 옵션 | 결과 예시 |
|
|
224
|
+
| ---------------------- | -------------- |
|
|
225
|
+
| `camelCase` | `userProfile` |
|
|
226
|
+
| `PascalCase` | `UserProfile` |
|
|
227
|
+
| `snake_case` | `user_profile` |
|
|
99
228
|
| `SCREAMING_SNAKE_CASE` | `USER_PROFILE` |
|
|
100
|
-
| `original`
|
|
229
|
+
| `original` | `user-profile` |
|
|
101
230
|
|
|
102
231
|
## 중복 키 감지
|
|
103
232
|
|
|
104
233
|
같은 변수명으로 변환되는 파일이 있으면 에러를 출력하고 중단합니다.
|
|
105
234
|
|
|
106
|
-
```
|
|
235
|
+
```txt
|
|
107
236
|
Duplicate asset key detected: userProfile
|
|
108
237
|
- user-profile.png
|
|
109
238
|
- user_profile.png
|
|
@@ -116,3 +245,5 @@ Duplicate asset key detected: userProfile
|
|
|
116
245
|
## 라이선스
|
|
117
246
|
|
|
118
247
|
MIT
|
|
248
|
+
|
|
249
|
+
</details>
|