> 웹 프론트엔드 > CSS 튜토리얼 > NPM 패키지를 설치하는 방법

NPM 패키지를 설치하는 방법

Jennifer Aniston
풀어 주다: 2025-03-15 09:57:08
원래의
838명이 탐색했습니다.

NPM 패키지를 설치하는 방법

NPM에 대해 자세히 알아보십시오! 이전 장에서는 노드 및 패키지 관리자를 배웠고 노드 및 NPM을 설치하고 NVM (Node Version Manager)에 익숙해졌습니다. 이 NPM 초보자 안내서의 다음 부분은 NPM 패키지 설치에 가장 관심이있는 내용을 소개합니다.

가이드 챕터

  1. 이 안내서는 누구입니까?
  2. "NPM"은 무엇을 의미합니까?
  3. 명령 줄은 무엇입니까?
  4. 노드 란 무엇입니까?
  5. 패키지 관리자 란 무엇입니까?
  6. NPM을 설치하는 방법?
  7. NPM 패키지를 설치하는 방법? (현재 위치!)
  8. NPM 명령은 무엇입니까?
  9. 기존 NPM 프로젝트를 설치하는 방법은 무엇입니까?

빠른 예

npm install 명령 (또는 npm i 로 약칭)을 사용하여 첫 번째 패키지를 설치하고 패키지 이름을 추가하여 프로젝트에 추가 할 수 있습니다. 예를 들어, Sass의 노드 패키지는 단순히 "SASS"라고 불리우므로 이와 같은 프로젝트에 추가 할 수 있음을 의미합니다 (이 작은 프로젝트를 위해 작성된 새 폴더에 먼저 있는지 확인하십시오).

 NPM SASS 설치
로그인 후 복사

그게 다야! 이 명령을 입력하면 NPM이 즉시 작동하기 시작합니다.

무대 뒤에서 일어나는 일은 NPM이 NPM 패키지 레지스트리에서 Sass라는 패키지를 찾으려고한다는 것입니다. 패키지가 발견되면 (IT) NPM은 패키지가 실행 해야하는 모든 것을 포함하여 프로젝트에서 자동으로 생성 된 node_modules 폴더 (나중에 추가로 제공)에 설치합니다. (그렇기 때문에 NPM이 16 개의 패키지를 추가하고 SASS 패키지 자체 대신 총 17 개의 NPM 패키지를 검토하는 이유입니다.)

설치 명령을 실행 한 후 프로젝트 폴더에 "SASS"라는 항목이 표시되지 않으며, 이는 기대할 수있는 것과 다릅니다. 그러나 이상하게도 우리는 프로젝트 폴더에 3 개의 새로운 프로젝트 ( package.jsonpackage-lock.json 이라는 2 개의 JSON 파일과 새로운 node_modules 폴더를 볼 수 있습니다.

이것들은 무엇입니까? 우리는 NPM이 SASS를 설치하려면이 모든 것을 설치해야합니다. 이것은 Sass의 일부가 아닙니다… 맞습니까? 예, 이것은 정확하지만 프로젝트 폴더에서 이러한 새로운 프로젝트가 생성되는 이유에 대한 좋은 설명이 있습니다. 방금 무슨 일이 있었는지 봅시다.

패키지를 설치할 때 어떻게됩니까?

패키지를 설치 (또는 제거 또는 업데이트) 할 때 NPM은 다음과 같은 네 가지를 대부분 또는 모두 수행합니다.

  1. 필요에 따라 프로젝트에서 package.json 파일을 업데이트하십시오.
  2. 모든 기술적 세부 사항이있는 package-lock.json 파일 ( "잠금 파일")을 업데이트합니다.
  3. 실제 패키지 파일 및 원래 패키지가 의존 할 수있는 다른 패키지를 설치하십시오 ( node_modules 폴더)
  4. 설치된 패키지의 감사를 실행하십시오.

하나씩 소개합시다.

package.json 및 package-lock.json

이 두 JSON 파일은 함께 작동하여 프로젝트의 모든 종속성 (및 모든 종속성 , 모든 종속성 등)의 정확한 로깅을 보장합니다. 둘 사이의 차이점은 약간 기술적이지만 간단히 말합니다. 잠금 파일은 프로젝트 종속성 트리의 심층적이고 정확한 스냅 샷이며 package.json 다른 것들을 포함 할 수있는 높은 수준의 개요입니다. 설치 한 기본 패키지는 package.json 에 나열 될 수 있지만 package-lock.json 전체 종속성 트리를 추적하는 곳입니다.

잠금 파일은 수동으로 업데이트되어서는 안됩니다. 따라서 잠금 파일을 package.json 파일로 혼동하지 마십시오.

프로젝트에서 다른 사람과 공유하거나 협력 할 때 NPM은 프로젝트의 소스 와이 두 파일을 통해 프로젝트에 설치된 내용을 알고 있습니다. 이 정보 덕분에 다른 사람의 기계에서 환경을 정확하게 복사 할 수 있습니다. 두 파일 모두 GIT 저장소에 제출하고 프로젝트의 종속성 청사진 역할을해야합니다. 이런 식으로 팀의 다른 개발자가 저장소를 클릭하고 npm install 명령을 실행하면 NPM은 설치할 패키지를 정확하게 알고 있으며 동료를 동기화합니다.

package.json 열면 많이 보지 못하지만 살펴볼 가치가 있고 무슨 일이 일어나고 있는지 볼 가치가 있습니다.

 {
  "의존성": {
    "Sass": "^1.43.4"
  }
}
로그인 후 복사

정확한 버전 번호가 표시되지 않을 수 있지만 (이 기사가 작성된 이후로 패키지가 업데이트 되었기 때문에) JSON dependencies 개체 내부에는 SASS가 표시 됩니다 . 숫자 자체 (이 경우 1.43.4)는 설치된 SASS의 특정 버전을 나타냅니다.

짧지 만 중요한 부수적 참고 사항 : 버전 번호의 시작 부분의 Off-Character (^)를 통해 NPM은 패키지에 약간의 업데이트를 설치할 수 있습니다. 다시 말해, 설치된 SASS 패키지는 최소 1.43.4이어야하지만 여전히 2.0.0 미만인 경우 더 높은 버전 1.xx 일 수 있다고 NPM에 알려줍니다. NPM은 일반적으로 패키지를 설치할 때 최신 안정 버전을 선택하지만 비파괴 업데이트를 허용하도록 추가됩니다. 이 부분을 "Semantic Versioning"이라고하며, 이는 그 자체로 블로그 게시물 주제이지만 NPM에 고유하지는 않습니다.

어쨌든, 이것들은이 두 JSON 파일입니다. 다음으로 node_modules 폴더에 대해 논의하겠습니다.

node_modules

node_modules 는 모든 실제 패키지 코드가있는 곳입니다 . 지시 사항을 따르는 동안 폴더를 열면 SASS 폴더가 있지만 다른 폴더도 여러 개 있습니다.

다른 폴더의 이유는 패키지가 설치되면 다른 패키지가 제대로 작동하기 때문에 (SASS가 필요합니다). 따라서 NPM은 이러한 모든 종속성을 찾고 설치하는 작업을 자동으로 완료합니다. 추측 할 수 있듯이, 이러한 종속성은 또한 다른 종속성을 가질 수 있으므로, 프로세스는 의존성 트리를 가장 먼 지점으로 크롤링하고 필요한 모든 것을 설치할 때까지 (또는 희망적으로 오류가 발생하지 않더라도) 프로세스가 반복 될 것입니다.

따라서 프로젝트에는 일반적으로 디스크 공간 측면에서 빠르게 축적되는 node_modules 서브 폴더가 있습니다. node_modules 일반적으로 매우 커집니다.

node_modules 와 같은 대형 폴더를 프로젝트의 저장소에 제출하는 방법을 알고 싶다면 JSON 파일과 달리 node_modules 폴더는 GIT에 최선을 다하지 않아야하며 공유해서는 안됩니다. 실제로, 거의 모든 .gitignore 파일 (파일을 추적 할 때 건너 뛰어야 할 git을 알려주는 파일)의 예에는 node_modules 포함되어 Git이 접촉하거나 추적하지 않도록합니다.

그렇다면 팀의 다른 사람들은 어떻게이 패키지를 얻습니까? 명령 줄에서 npm install (또는 npm i 로 약어)를 실행하여 소스에서 직접 종속성을 다운로드합니다. 이런 식으로, 원래 저장소에서 많은 양의 데이터를 커밋하거나 추출 할 필요가 없습니다.

종속성을 설치할 때주의를 기울여야합니다

이 거대한 종속성 네트워크와 원거리 상대 의존성 네트워크는 이러한 상황을 유발할 수 있습니다. 유용한 서비스를 제공하는 일부 유틸리티 라이브러리는 다른 많은 패키지에서 채택 될 수 있으며, 원래 코드가 사이트 및 응용 프로그램의 많은 부분에 조용히 설치 될 때까지 다른 많은 패키지에서 사용됩니다.

실제로 패키지를 설치하는 동안 다른 많은 것들이 들어갈 수 있습니다. 새로운 친구를 가족 파티에 초대하는 느낌이 들며 친구는 20 명의 초대받지 않은 손님과 나타납니다. 그러나 이것은 다음과 같은 이유로 그렇게 이상하거나 끔찍한 것처럼 보이지 않습니다.

  1. 대부분의 NPM 패키지는 오픈 소스입니다. 귀하와 다른 사람은 내부의 작동 방식을 쉽게보고 패키지가 무엇을하는지 정확히 알 수 있습니다. 레지스트리 (NPMJS.com)에서 패키지를보고, 마지막으로 업데이트 된시기 및 기타 관련 정보가 몇 번 설치되었는지 확인할 수도 있습니다. 패키지가 꽤 인기가 있다면 안전하다고 합리적으로 확인할 수 있습니다.
  2. 많은 프로젝트가 필요로하는 거대한 기능의 세계가 있습니다. 예를 들어, 날짜 서식, HTTP 요청 및 응답 처리, 조절, 쉐이크 또는 애니메이션을 고려하십시오. 새 프로젝트에서 사용할 때마다 휠을 재창조하고 수동으로 인코딩하는 것은 의미가 없습니다.
  3. 패키지 설치는 휴대 전화에 앱을 설치하거나 WordPress 웹 사이트에 플러그인을 설치하는 것과 다르지 않습니다 . 차이점은 패키지를 처리 ​​할 때 이러한 응용 프로그램 및 플러그인이 내부적으로 작동하는 방식 및 이러한 응용 프로그램 및 플러그인이 의존 할 수있는 다른 것들에 대해 더 깊이 이해할 수 없다는 것입니다. 어떤 식 으로든 많은 작은 패키지를 소개 할 가능성이 높습니다.

물론, 임의의 코드를 설치하고 실행할 수있는 모든 환경에서는 신중한 것이 좋습니다. 제발 나를 잘못 이해하지 마십시오. 내가 나쁜 사람들 이이 시스템을 성공적으로 이용하지 않았다고 말하면 거짓말을 할 것입니다. 그러나 일이 잘못되지 못하게 할 수있는 많은 프로세스가 있다는 것을 알고 있습니다. 의심스러운 경우 가장 인기있는 가방을 고수하여 괜찮습니다.

또한 NPM은 자동 보안 감사를 실행 하여이 섹션의 마지막 지점으로 이동합니다.

NPM 감사 란 무엇입니까?

전에 Sass를 설치했을 때 터미널이 완료되면 다음 메시지를 보았습니다.

 <code>found 0 vulnerabilities</code>
로그인 후 복사

그러나 아래의 오래된 프로젝트와 같이 몇 가지 경고가 표시 될 수 있습니다. 나는 그것을 시작하고 npm install ( npm i )가 적어도 몇 년 동안 유휴 상태가 된 후 실행하기로 결정했습니다. 그것이 어떻게 수행되는지 봅시다 :

NPM 감사는 알려진 취약점이있는 패키지를 나타내며 패키지를 설치하면 감사가 자동으로 실행됩니다. 이와 같은 뉴스를 보면, 많은 취약점, 특히 "중간"범주의 취약점은 매우 낮은 실제 위험을 초래하며 매우 구체적인 상황과 관련이있을 수 있습니다. (예를 들어, 패키지의 하나의 메소드 만 특정 방식으로 사용하면 취약해질 수 있습니다.)

그럼에도 불구하고, 우리가 해결할 수있는 문제를 해결하는 것이 좋습니다. 이것이 npm audit fix 명령이하는 일입니다. 마지막에 fix 추가하면 NPM이 알려진 취약점이있는 모든 패키지의 새로운 마이너 버전을 계속 업데이트하도록 지시합니다. "마이너 버전"섹션은 중요합니다. 마이너 버전에는 주요 변경 사항이 포함되어야합니다. 즉, 프로젝트를 위반할 위험없이 업데이트가 이러한 방식으로 안전하게 실행 되어야합니다 .

패키지의 버전 번호를 사소한 버전 번호로 올리는 것이 작동하지 않으면 --force 플래그를 원래 명령에 추가 할 수 있습니다.

 NPM 감사 수정 -포스
로그인 후 복사

그러나 이것은 위험한 작업입니다. NPM "사용 강제 사용"권한 부여는 이제 취약성을 해결하기 위해 주요 버전 업데이트를 설치할 수 있음을 의미합니다. 즉, 상당한 변경을하거나 비 호환성을 도입 할 수 있습니다. npm audit fix 해결할 수없는 중요한 취약점이없고 나중에 (필요한 경우) 나중에 문제를 해결하는 데 많은 시간을 할애 할 수 없다면이를 권장하지 않습니다.

이 주제에 대한 마지막 메모 : 때로는 node_modules 제거하고 npm install 다시 시작하여 NPM 프로젝트에서 예기치 않은 문제를 해결할 수 있습니다. 이것은 NPM의 "반복 스위치"방법이며 여러 번 직접 해냈습니다.

다음 단계

이제 NPM 뒤에서 작동하는 토끼 구멍을 철저히 탐색 했으므로 실제 작업 으로 돌아가 봅시다.

← 6 장 8 장 →

위 내용은 NPM 패키지를 설치하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿