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

<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 등). 이제이 옵션이 가장 정확하다고 생각하기 시작합니다.

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

답변

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)

<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