웹 사이트의 디렉토리 구조 (js / css / img 폴더)

몇 년 동안 나는 내 웹 사이트에 다음 디렉토리 구조를 사용해 왔습니다.

<root>
  ->js
    ->jquery.js
    ->tooltip.js
    ->someplugin.js
  ->css
    ->styles.css
    ->someplugin.css
  ->images
    -> all website images...

다른 타사 구성 요소를 사용하기 시작할 때까지는 완벽하게 괜찮 았습니다.
예를 들어, 오늘 css 파일이있는 동일한 디렉토리에서 이미지를 찾는 datetime picker javascript 구성 요소를 다운로드했습니다 (css 파일에는 "url ( 'calendar.png')"와 같은 URL이 포함됨).

이제 세 가지 옵션이 있습니다.

1) datepicker.css를 내 CSS 디렉토리에 넣고 이미지를 함께 넣으십시오. css 디렉토리 안에 CSS와 이미지 파일이 모두 있기 때문에이 옵션이 마음에 들지 않습니다. 또한 2 개의 다른 구성 요소와 같은 동일한 이름의 다른 구성 요소의 파일을 CSS 파일의 background.png에 연결할 수 있습니다. 파일 이름 중 하나의 이름을 바꾸고 링크가 포함 된 해당 파일을 편집하여 이름 충돌을 해결해야합니다.

2) datepicker.css를 내 CSS 디렉토리에 넣고 이미지를 images 디렉토리에 넣고 datepicker.css를 편집하여 images 디렉토리에서 이미지를 찾으십시오. 이 옵션은 괜찮지 만 타사 구성 요소를 내 사이트 구조에 맞게 편집하려면 시간이 좀 걸립니다. 여기서도 이름 충돌이 발생할 수 있으며 (이전 옵션에서 설명한대로)이를 수정해야합니다.

3) datepicker.js, datepicker.css 및 이미지를 별도의 디렉토리에 넣고 / 3rdParty / datepicker /라고 말하고 작성자가 의도 한대로 파일을 배치하십시오 (예 : / 3rdParty / datepicker / css / datepicker .css, /3rdParty/datepicker/css/something.png 등). 이제이 옵션이 가장 정확하다고 생각하기 시작합니다.

숙련 된 웹 개발자, 당신은 무엇을 추천합니까?

나는 항상 타사 구성 요소에 대한 lib 디렉토리를 만듭니다. 엄격히 필요한 경우가 아니면 타사 라이브러리를 변경하고 싶지 않습니다.

세 번째 옵션으로 이동하십시오.

나에게 임의적이라고 느끼는 파일 유형으로 물건을 분리하는 대신 개발자가 파일을 사용하고 생각하는 방식으로 파일을 구성합니다. 몇 가지 기본 범주로 분류합니다.

myapp/
  ui/ # or "www"
    lib/ # third-party
      jquery/
      sugarjs/
      backbone/
      underscore/
    app/ # application logic
      main.js
      router.js
      views.js
      models.js
    style/ # all presentation
      main.css
      buttons.css
      icons/
        add.svg
        log.png
      img/
        logo.png
        signup.png
    components/ # standalone bundles of html/css/js, if necessary
  server/ # or "api" (all server-side logic)

타사 라이브러리를 업그레이드 할 때 모든 변경 사항을 다시 적용해야하기 때문에 옵션 # 2도 실용적이고 위험하지 않습니다. 이것은 확실히 큰 아니오 아니오입니다! 옵션 # 1과 # 3에는 각각 장단점이 있습니다. 그래서 나는 보통 둘의 조합으로갑니다.

내 솔루션은 내 파일에 옵션 # 1을 사용하고 타사 라이브러리에 옵션 # 3을 사용하는 것입니다.

예:

<root>
  -> js
    -> jquery.js
    -> main.js
  -> css
    -> reset.css
    -> style.css
  -> img
    -> img1.jpg
    -> img2.jpg
  -> lib
    -> someplugin1
      -> original folder/file structure of this plugin
    -> someplugin2
      -> original folder/file structure of this plugin