본문으로 건너뛰기

gen:img

이미지 경로를 객체로 생성하는 스크립트입니다.
개발자의 타이핑으로 경로를 가져오는것이 아니라 객체의 key 값으로 가져옴으로써 경로를 가져오는데 편의성과 안정성을 제공합니다.

public/example
├── logo.png
├── detail
│   └── dog.png
├── landing
│   └── cat.jpg
└── main
    └── bird.png

위의 폴더 구조의 이미지는 아래의 객체로 변환됩니다.

export const MY_IMAGES = {
  EXAMPLE_BANNER: { src: 'example/banner.png', alt: 'banner' },
  EXAMPLE_DETAIL_DOG: { src: 'example/detail/dog.png', alt: 'dog' },
  EXAMPLE_LANDING_CAT: { src: 'example/landing/cat.jpg', alt: 'cat' },
  EXAMPLE_LOGO: { src: 'example/logo.png', alt: 'logo' },
  EXAMPLE_MAIN_BIRD: { src: 'example/main/bird.png', alt: 'bird' },
}

Installation​

npm i -D @toktokhan-dev/cli @toktokhan-dev/cli-plugin-gen-img

Run Script​

command 를 별도로 입력하지 않으면 대화형으로 실행되어 등록되어있는 스크립트 중 선택하여 사용이 가능합니다.

npx tokript

command 를 입력하면 해당 스크립트가 바로 실행됩니다.

npx tokript gen:img
팁

자주 사용될 수 있는 스크립트는 협업간 편의성을 위해 package.json에 등록하는걸 권장 드립니다.

package.json
{
...
"scripts": {
  "gen:img": "tokript gen:img",
}
}
yarn run gen:img

Configuration​

tok-cli.config.ts 에서 config 정의가 가능합니다.

tokript.config.ts
import { genImg } from '@toktokhan-dev/cli-plugin-gen-img'

const config: RootConfig<{
plugins: [typeof genImg]
}> = {
plugins: [genImg],
'gen:img': {
  ...
},
}

export default config

input​

  • Required: false
  • Type: string
  • Default: public
  • Cli Option:--input -i
이미지 파일이 위치한 디렉토리 경로

config​

tok-cli.config.ts
{
'gen:img': {
  input: 'path/to/img',
  ...
},
}

cli

tokript gen:img --input "path/to/img"

output​

  • Required: false
  • Type: string
  • Default: src/generated/path/images.ts
  • Cli Option:--output -o
생성될 파일이 위치할 경로

config​

tok-cli.config.ts
{
'gen:img': {
  output: 'path/to/img',
  ...
},
}

cli

tokript gen:img --output "path/to/img"

displayName​

  • Required: false
  • Type: string
  • Default: MY_IMAGES
  • Cli Option:--displayName -d
생성될 image 객체의 이름입니다

config​

tok-cli.config.ts
{
'gen:img': {
  displayName: 'MY_IMAGES',
  ...
},
}

cli

tokript gen:img --displayName "MY_IMAGES"

basePath​

  • Required: false
  • Type: string
  • Default: /
  • Cli Option:--basePath -b
생성될 객체의 value 에 할당될 경로의 base-path 입니다

config​

tok-cli.config.ts
{
'gen:img': {
  basePath: '/',
  ...
},
}

cli

tokript gen:img --basePath "/"

includes​

  • Required: false
  • Type: string[]
  • Default: ['*.jpg', '*.png', '*.svg', '*.jpeg', '*.webp']
  • Cli Option:--includes -ic
생성될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에만 객체에 포함됩니다.

config​

tok-cli.config.ts
{
'gen:img': {
  includes: ['*.jpg', '*.png'],
  ...
},
}

cli

tokript gen:img --includes '*.jpg', '*.png'

ignored​

  • Required: false
  • Type: string[]
  • Default: ['*node_module*']
  • Cli Option:--ignored -ig
제외 될 이미지 파일을 판별하는 패턴으로써, 파일이름이 패턴과 일치할 경우에 객체에서 제외 됩니다.

config​

tok-cli.config.ts
{
'gen:img': {
  ignored: ['*.webp', '*.png'],
  ...
},
}

cli

tokript gen:img --ignored '*.webp', '*.png'

oneDepth​

  • Required: false
  • Type: boolean
  • Default: true
  • Cli Option:--oneDepth -od
one depth 가 true 일 경우, 폴더 구조를 무시하고 one depth 로 객체를 생성합니다.

config​

tok-cli.config.ts
{
'gen:img': {
  oneDepth: true,
  ...
},
}

cli

tokript gen:img --oneDepth true

formatKey​

  • Required: false
  • Type: (fileName: string) => string
  • Default: (string) => snakeCase(string).toUpperCase()
  • Cli Option: -
key 값을 결정할 포멧함수입니다. 기본적으로, SNAKE_UPPER_CASE 로 생성됩니다.

config​

tok-cli.config.ts
{
'gen:img': {
  formatKey: (string) => snakeCase(string).toUpperCase(),
  ...
},
}