당신의 일상적인 자바스크립트 수요에 대해 인터넷에서 유행하는 말이 있습니다.

There is a NPM package for that

좀 과장된 것 같기도 하고, 그렇지 않나요?그럼에도 불구하고 NPM 의존항을 설치하는 것은 모든 프로젝트의 일부이므로 조심스럽고 심사숙고해야 한다.
나는 이것이 가장 좋은 방법인지 아닌지 확실하지 않다.하지만 제 콘솔에서 npm install ...를 클릭하기 전에 제 생각을 공유하고 싶습니다.

의지하다

네가 NPM 검색엔진을 계속 눌렀는데 완벽한 결과가 나왔다. 이것은 네가 기다렸던 모든 것이다. 그리고 더 많다.그러나 우리는 아직 곤경에서 벗어나지 못했다. 새로운 고급 의존항을 설치하기 전에 몇 가지 절차를 따라야 한다.

크기가 중요하다

아주 좋은 도구는 https://bundlephobia.com입니다.
토론의 편의를 위해 Vue 애플리케이션의 퀵 모드 라이브러리를 검색하고 있다고 가정합니다.첫 번째 검색 tot 팝업 창은 vue-js-modal입니다.bundlephobia를 빠르게 검색하면 다음과 같은 결과를 얻을 수 있습니다.

이것들은 모태에 관한 재미있는 숫자들이다.모드 구성 요소의 대역폭 값은 11KB입니까?
당신의 묶음 공포증 조사에서 주의해야 할 것은 다음과 같다.

다운로드 속도

묶음 크기(원시 및 압축)

로 구성

읽어보기 파일 보기

자술이 없다면, 첫 번째 위험 신호다.이런 상황에서 NPM 검색엔진으로 돌아갈 때가 된 것 같다.만약 네가 단지 탐색이나 실험을 하고 싶을 뿐이라면, 공자술은 괜찮다.하지만 생산 의존을 찾고 싶다면, 나는 돌아설 것이다.
예제 섹션을 봅니다.예시에서 이 의존항이 당신의 요구에 부합되는지 확인할 것입니다.만약 그것이 정말 너무 많다면, 단지 간단한 즐거움의 흐름을 위해서라면, 그렇게 많은 추가 바이트를 가질 가치가 없다.패키지가 트리 흔들기를 지원한다면 (Tree shakeability 보기 모드 세부 정보) 큰 문제가 되지 않습니다.
자술한 파일에는 더욱 광범위한 문서나 링크가 있어야 한다.

저장소

만약 지금까지 모든 것이 정상이라면 우리는 저장소로 갈 수 있다.

기여 빈도

메모리 라이브러리의 맥박을 얻는 방법의 하나는 마지막 공헌을 검사하는 것이다.Github의 파일 줄 왼쪽에서 쉽게 볼 수 있습니다.
src 또는 소스 폴더가 가장 중요한 폴더입니다. 소스가 마지막으로 변경된 시간을 알려주기 때문입니다.만약 우리가 7~8개월이 넘는 것을 본다면 (이 숫자 뒤에는 아무런 연구도 없다) 위험 신호가 나타날 것이다.극소수의 경우 소프트웨어 패키지는 유지보수를 필요로 하지 않거나 간단하게 완성할 수 있다.그러나 대다수 상황에서 환매 협의의 활동을 보고 싶어 한다.
왜 기부 빈도가 중요합니까?그것은 프로젝트가 포기되었는지, 아니면 지역사회가 흥미를 잃었는지 개발자들에게 알려준다.
또 다른 저장소를 남기거나 폐기하는 방법은 자술한 파일에서 Project status 또는 비슷한 제목을 찾는 것이다.우리는 momentjs repository에서 이런 장절의 예시를 찾을 수 있다.

릴리즈

버전을 확인합니다.만약 라이브러리가 alpha 또는 beta 버전이라면, 그것은 아직 생산이 준비되지 않았다는 것을 의미한다.그러나 그들은 더 오래된 안정적인 버전을 가지고 있을지도 모른다.만약 자술한 파일에 명확한 정보가 없다면, Github 탭 부분을 보고 다음 안정적인 버전을 찾을 수 있습니다.그러나 자술이 분명하지 않으면 운이 나쁘다는 것을 의미한다.

보안

종속성 설치npm install를 통과하면 NPM은 npm audit를 통해 감사 검사를 수행하며 취약점이 발생하면 보고서를 받습니다.설치하려는 소프트웨어 패키지의 종속 항목에 문제가 있으면 npm audit fix를 사용하여 이 문제를 복구해 보십시오.
자세한 내용은 공식 홈페이지NPM documentation를 참조하십시오.

소스 코드

원본 코드를 읽는 것은 매우 좋은 실천이다.그것은 많은 장점이 있다.
원본 코드를 읽는 것은 매우 중요하다. 왜냐하면 개발자가 의존성이 필요를 초과했는지, 아니면 다른 극단에서 너무 적게 했는지 알 수 있기 때문이다.
의존항이 수중의 문제를 해결한 것 같아도 설치할 필요가 없을 수도 있다.일부 의존 항목은 기존 라이브러리의 간단한 포장 (또는 외관) 일 수 있습니다.이러한 유형의 종속 관계는 react나 vue 같은 UI 라이브러리에서 쉽게 발견할 수 있습니다.예: vue-click-outside,vue-markdown 등.
만약 우리가 vue-markdown의 자술 파일을 분석하려고 한다면, 우리는 그것이 미리 설정된 확장을 가지고 있음을 볼 수 있다.만약 우리가 코드를 깊이 연구한다면, 우리는 필요하다면 새로운 확장을 비활성화하거나 추가할 방법이 없다는 것을 발견할 수 있을 것이다.

render(createElement) {
    this.md = new markdownIt()
      .use(subscript)
      .use(superscript)
      .use(footnote)
      .use(deflist)
      .use(abbreviation)
      .use(insert)
      .use(mark)
      .use(katex, { "throwOnError": false, "errorColor": " #cc0000" })
      .use(tasklists, { enabled: this.taskLists })
}

markdown 인스턴스는 어셈블리 인스턴스에 있습니다.구성을 변경하려면 직접 액세스하고 재시작해야 합니다.이것은 일괄 계획의 목적에 완전히 위배된다.
Vue를 업그레이드하려면 Vue와 같은 UI 패키지에 연결된 라이브러리에 의존하는 또 다른 단점이 더욱 뚜렷해집니다.Vue 기반 패키지가 많으면 업그레이드 프로세스가 불필요하게 복잡해집니다.
만약 결론 vue-markdown 이 너무 적거나 너무 많다면, 구성 요소가 기반으로 한 코드 라이브러리를 사용할 수 있습니다.이 예markdown-it에서 올바른 설정으로 자신의 구성 요소를 만듭니다.

요수성

이 기능은 웹 패키지나 롤러와 같은 가장 유행하는 묶음 도구에 내장되어 있습니다.이것은 당신이 사용하고자 하는 기능을 엄격하게 가져올 가능성을 제공하기 때문에 매우 중요하다.가져오지 않은 라이브러리의 나머지 부분은 최종 패키지에 들어가지 않습니다.이것은 소포가 반드시 갖추어야 할 매우 중요한 특징이다.
라이브러리가 트리로 흔들릴 수 없는지를 판단하는 간단한 방법은 문서를 보고 라이브러리를 어떻게 가져오는지 보는 것이다.예를 들어 momentjs는 다음과 같은 방법으로만 가져올 수 있으므로 트리 진동을 수행할 수 없습니다.

import moment from 'moment'

vs date-fns 어느 것이 흔들릴 수 있는지

import { format } from 'date-fns`

체크아웃에 대한 자세한 내용the webpack docs.

종속성 확인

저장소의 pacakge.json 파일을 읽으면 이러한 컨텐트를 쉽게 확인할 수 있습니다.주의해야 할 것들

이중 의존: 의존항을 복제한다. 버전이 프로젝트의 버전과 다르기 때문이다(예를 들어 최종적으로 두 개의 Vue 버전이나 두 개의 React 버전을 얻는다).의존항을 설치한 후 읽기package-lock.json 또는 yarn.lock를 통해 이 점을 검사하고 여러 버전의 의존항을 찾을 수 있다.

의존 항목이 너무 많다. 이것은 최종 패키지 크기를 크게 증가시킬 수 있지만 내가 앞서 언급한 버블 포비아도 이 점을 발견할 수 있다.

Github 스타

이것은 필터 패키지의 가장 잘 알려진 기준이기 때문이다.여기는 할 말이 없어서 나는 말하지 않겠다.left-pad에는 많은 별이 있다는 것을 기억해 주십시오. 우리는 모두 where that road가 이미 사라졌다는 것을 알고 있습니다.

이 목록의 일부 또는 모든 항목을 무시하는 이유

한마디: speed: 개념 증명서나 작은 항목을 모으고 싶다면.단, 유지보수가 필요한 장기 프로젝트에 대해 다음 의존항을 설치하기 전에 이 절차를 점검하는 것이 도움이 될 수 있습니다.

결론

나는 이 목록이 개선될 수 있을 뿐만 아니라 아직 완성되지 않았다고 믿지만, 이것은 아주 좋은 시작이다.개발자는 보통 다른 임무로 바쁘기 때문에 프로젝트는 항상 마감일 전에 끝난다.그러나 이 모든 바쁜 행동 때문에 사람들은 더 이상 효과가 없을 때까지 효과적인 일을 하기 쉽다.
장기적으로 보면 프로젝트에서 비교적 적은 의존 관계가 이익을 가져올 것이다.당신은 이 프로젝트에 대해 더 많은 통제권을 가지게 될 것입니다. 우리는 지금 이 프로젝트를 처리하는 것이 얼마나 고통스러운지 알고 있습니다.

버전 의존 문제

종속성 업그레이드/업데이트

핵심 라이브러리 업그레이드, 예를 들어 Vue, React 등은 기타 의존 항목에 영향을 줄 수 있음

읽어주셔서 감사합니다.