프론트엔드 의존성

GitLab 프론트엔드 의존성 관리, 프로덕션 및 개발 의존성 구분, 의존성 업데이트 및 패치 방법을 설명합니다.

프론트엔드 의존성 관리에는 yarn@1 을 사용합니다. GitLab 리포지터리에는 vendor/assets/ 에 저장된 몇 가지 예외가 있습니다. 프로덕션 의존성과 개발 의존성이란? # 이 의존성들은 package.json 내 두 그룹인 dependencies 와 devDependencies 로 정의됩니다. 우리의 목적상, 프로덕션 에셋을 컴파일하는 데 필요한 모든 것을 "프로덕션" 의존성으로 간주합니다. 즉, NODE_ENV=production 으로 webpack 스크립트를 실행하는 데 필요한 모든 것을 의미합니다. eslint , jest , 그리고 개발 시 사용되는 각종 플러그인 및 도구들은 devDependencies 로 간주합니다. 이 구분은 GitLab을 빌드할 때 omnibus가 필요한 의존성을 결정하는 데 사용됩니다. 프로덕션 에셋 컴파일 후 분석을 위해 webpack-bundle-analyzer 와 같이 compile-production-assets CI job에서 필요한 일부 도구에 대해서는 예외가 적용됩니다. 의존성 업데이트 # 의존성 업데이트에 대한 일반적인 정보는 기본 의존성 페이지를 참고하세요. 의존성 패치 # patch-package 를 사용하여 의존성에 패치를 적용할 수 있습니다. 패치는 patches/ 디렉터리 아래에 저장됩니다. 패치가 필요한 경우 # 의존성 패치는 기술 부채이므로 최후의 수단으로만 적용해야 합니다. 다음은 의존성을 패치하기에 적합한 이유들입니다: 유지 관리가 되지 않아 변경 사항이 포함된 업스트림 버전이 없는 경우; 업스트림에서 수정을 기다릴 수 없는 취약점이 발견된 경우; GitLab에 특화되어 있어 업스트림에서 변경되지 않았거나 변경될 수 없는 사항을 변경하는 경우. 의존성 패치 방법 # 가능하다면, 패치가 원하는 동작을 달성하는지 확인하는 테스트를 추가합니다. node_modules 에서 관련 파일을 직접 편집합니다. 편집 시 다음 내용을 상세히 기술한 주석을 포함해야 합니다: 패치가 필요한 이유, 언제 제거할 수 있는지, 패치가 해결하는 문제를 설명하는 이슈 또는 머지 리퀘스트 링크. yarn patch-package <package-name> 을 실행하여 편집 내용으로부터 패치를 생성합니다. git add patches/ 로 패치를 추가합니다. 일반적인 방법으로 커밋합니다. 패치 업데이트 # `@vue/compat` 패치는 특별한 주의가 필요합니다. [이 문서](https://gitlab.com/gitlab-org/frontend/vuejs-core/-/blob/v3.5.30-gitlab-hybrid/README.md)를 참고하세요. 패치는 특정 버전의 의존성에 종속됩니다. 해당 의존성이 업데이트되면 그에 대한 패치도 함께 업데이트해야 합니다. 패치가 깨끗하게 적용되는 경우: yarn patch-package <package-name> 을 실행하여 새 버전에 적용되도록 패치의 이름을 변경합니다. git add patches/ 를 실행합니다. 일반적인 방법으로 커