npm 초보자 가이드

노드 패키지 관리자란?

개발에서 흔히 볼 수 있는 단어 중 하나는'바퀴를 재발명하지 마라'는 것이다. 기존의 기능을 만드는 데 많은 시간을 들이지 말라는 뜻이다.비록 이것은 좋은 학습 경험일 수 있지만, 생산 코드를 구축할 때, 자이언트의 어깨 위에 서면, 다른 사람이 쓴 코드를 이용하면 통상적으로 훨씬 힘을 절약할 수 있다.
긴 말은 짧게 해도, node 패키지 관리자 (npm) 는 다른 사람이 작성한 '코드 패키지' 를 설치하는 방법으로 프로젝트에서 사용할 수 있습니다.너는 스스로에게 물어볼 수도 있다. "왜 나는 그들의 코드를 파일로 복사하지 않습니까? 왜 나는 npm가 이 일을 해야 합니까?"복제 코드에 비해 npm를 사용하는 것은 장점이 있습니다. 예를 들어 그들의 프로젝트가 어떤 코드에 의존하여 실행되는지 알 필요가 없습니다. 만약에 npm 패키지에 안전 문제가 발생하면 패키지를 쉽게 업데이트할 수 있습니다!
npm의 가장 좋은 부분은 무엇입니까?Node을 덧붙였습니다!그래서 만약 당신이 Node를 설치했다면, 당신은 이미 npm를 설치했을 가능성이 높습니다!

npm 설치

나는 내가 이미 npm를 설치했는지 어떻게 알 수 있습니까?

명령줄에서 다음 명령을 실행하여 npm이 설치되었는지 확인할 수 있습니다.

npm --version

# Expected output to be something like
6.14.10
# If this number doesn't match up, that's OK! 

주의: 이것은 모든 디렉터리에서 실행할 수 있습니다. 노드 프로젝트 폴더가 필요하지 않습니다.

만약 내가 npm를 설치하지 않았다면 어떡하지?

Date()을 실행하면 다음과 같은 오류가 반환됩니다.

npm: The term 'npm' is not recognized as a name of a cmdlet, function, script file, or executable program. Check the spelling of the name, or if a path was included, verify that the path is correct and tray again.
# This is the powershell error format. CMD or bash might have slightly different error messages.

걱정 마!"LTS"(장기 지원) 버전이나 "현재"버전을 선택하면 Node.js homepage에서 Node/npm을 설치할 수 있습니다. 후자는 불안정할 수 있지만 최신 기능 집합을 제공합니다.

패키지를 다운로드하고 설치한 후 npm --version을 실행하십시오. 위의 그림에서 보듯이 되돌아오는 버전을 보실 수 있습니다.npm의 버전은 다운로드한 노드의 버전과 일치하지 않습니다. npm은 별도의 버전으로 발표됩니다.터미널이 초기에 열려 있으면 터미널을 다시 시작해야 할 수도 있습니다.

패키지에 들어갑니다.json

현재 우리는 npm를 설치했습니다. 우리는 그것이 어떻게 작동하는지, 그리고 당신이 진행하고 있는 프로젝트에 어떻게 영향을 미칠지 더욱 깊이 이해할 수 있습니다.
노드 항목이나 프레임워크(예를 들어 Vue 또는 React)를 사용할 때 패키지를 만날 수 있습니다.json 파일(CDN을 통해 React/Vue를 가져오지 않는 한)소포.npm --version과 dependencies 부분에서 npm는 json 파일을 사용하여 프로젝트에 사용하고자 하는 패키지를 이해합니다.

// These are the dependencies for my blog 
// at the time of writing
{
  //...
"dependencies": {
    "@fortawesome/free-regular-svg-icons": "^5.13.1",
    "@fortawesome/free-solid-svg-icons": "^5.13.1",
    "@gridsome/plugin-critical": "^0.1.6",
    "@gridsome/plugin-sitemap": "^0.4.0",
    "@gridsome/source-contentful": "^0.5.3",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.3.2",
    "@tailwindcss/typography": "^0.4.1",
    "autoprefixer": "^9",
    "dayjs": "^1.10.5",
    "gridsome": "^0.7.17",
    "gridsome-plugin-remark-prismjs-all": "^0.3.5",
    "postcss": "^7",
    "remark-footnotes": "2.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "webpack-bundle-analyzer": "^4.4.2"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.29",
    "@fortawesome/free-brands-svg-icons": "^5.13.1",
    "@fortawesome/vue-fontawesome": "^0.1.10",
    "@fullhuman/postcss-purgecss": "^2.3.0",
    "gridsome-plugin-remark-codetitle": "^0.2.2"
  }
}

npm 설치

주의: devDependencies과 npm install은 서로 바꿀 수 있습니다. 모두 같은 일을 합니다.
주의해야 할 것은 npm에 의존하는 저장소를 처음 복제할 때 프로젝트를 즉시 시작할 수 없습니다. 적어도 오류가 없을 것입니다.가장 먼저 해야 할 일은 npm i을 실행하는 것입니다. 패키지의 의존항을 읽을 것입니다.json 파일과 패키지를 설치합니다.운행에 시간이 좀 걸릴 때가 있으니 운행에 시간이 오래 걸릴 것 같으면 걱정하지 마세요.
설치 명령이 실행된 후에 디렉터리 패키지 자물쇠에서 새 파일을 찾을 수 있음을 알 수 있습니다.json.

1321 취약점 발견 정보는 무엇입니까?

때때로, 당신이 마지막에 npm install을 운행할 때, 당신은 메시지를 볼 수 있는데, 마지막에는 약간 이렇게 보인다.

found 1321 vulnerabilities (116 low, 246 moderate, 958 high, 1 critical) in 2040 scanned packages
  run `npm audit fix` to fix 1093 of them.
# Yes, this was for one of my actual repositories 😅

npm install이 실행될 때 npm도 npm install을 실행합니다. 이것은 npm 기록에 업데이트된 패키지가 있는지 확인하여 이미 알고 있는 안전 결함을 복구합니다.때로는 수동으로 복구해야 하지만, 때로는 npm audit을 실행하면 npm가 복구를 도와줄 수 있습니다. 구체적으로는 버전 설정에 달려 있습니다. (아래에 상세하게 설명하겠습니다.)

이 새 소포 자물쇠는 무엇입니까?json 파일?

소포 자물쇠.json은 npm에서 자동으로 생성된 파일로 설치된 npm 패키지의 정확한 버전을 설명하는 데 사용됩니다.이것은 다음과 같은 상황을 피하는 데 매우 중요하다.

npm 패키지 버전 1.0

처리 프로젝트 시작

GitHub

에 저장소 업로드

일정 시간 후 npm 패키지 2.0 버전이 발표되었고

누군가가 당신의 저장소를 복제하려고 시도합니다

npm audit fix을 실행하면 버전 2.0이 설치되어 있으며 실행하려고 하면 저장소에서 오류가 발생합니다.

패닉,

소포 자물쇠 덕분이에요.json, 사용자가 npm install을 실행할 때 프로젝트를 개발할 때 사용한 것과 같은 버전의 패키지를 설치합니다!아니, 파닉!

프로젝트에 패키지 추가

프로젝트에 사용할 npm 패키지 문서에서 패키지를 설치하는 방법에 대한 내용을 볼 수 있습니다.설치는 다음 모드를 따릅니다.

npm install packageName

이 중 npm install은 당신이 설치하고자 하는 npm 패키지의 이름으로 바꿉니다.또한 패키지를 연결하여 모든 패키지를 한 번에 설치할 수도 있습니다.

npm install package1 package2 package3

상기 명령은 "package1", "package2", "package3"을 설치합니다!
패키지를 추가할 때마다 일반 packageName이 실행되어 모든 패키지가 설치되어 있는지 확인합니다.

버전 지정

주의해야 할 것은 가방에 지정된 버전은 서로 다른 방법이 있다는 것이다.json.내가 본 몇 가지 가장 흔히 볼 수 있는 예:

{
  //...
  "dependencies": {
    "specific": "1.0.3",
    "tilde": "~1.2.0",
    "caret": "^1.0.0"
  }
  //...
}

specific 버전 1.0.3

설치 예정

tilde 는 보조 버전의 패치를 설치합니다.세 번째 소수점은 변경할 수 있지만 1.3.0은 설치되지 않는다는 얘기다.

삽입 기호는 작은 변경 사항과 패치를 설치합니다.다시 말하면 두 번째와 세 번째 소수는 변경할 수 있지만 2.0.0은 설치되지 않는다.

이것들은 서로 다른 상황에 매우 유용하다. 그러나 이것은 다른 날의 댓글이다.

만약 내가 노드 모듈을 설치했다면, 왜 다음에 나의 프로젝트를 사용하는 사람이 npm 설치를 실행해야 합니까?

제가 npm install 달리기 하는데 시간이 걸린다고 했던 거 기억나세요?패키지가 다운로드되어 저장소에 설치되어 있기 때문입니다.노드 모듈을 사용할 때 일반적인 방법은 다음과 같다.gitignore 프로젝트 루트 디렉토리의 파일:

node_modules

이것은 노드 모듈이 프로젝트와 함께 업로드되는 것을 막고 저장소를 전송할 때마다 시간을 절약할 수 있습니다.git 트리의 혼란을 줄일 수 있습니다.

의존과 의존

이 절은 주로 궁금한 사람과 npm 패키지를 발표하고 싶은 사람들을 대상으로 한다.이 절을 뛰어넘어도 괜찮다.👍
프로젝트에서 작업할 때 보통 테스트 프레임워크, 예를 들어 Jest을 포함하지만 테스트는 개발자 측에서 발생하기 때문에 나중에 가방을 사용하는 모든 사람이 Jest를 설치하기를 원하지 않을 수도 있습니다.로컬 개발에서 일반적인 설치 명령이 아닌 패키지가 필요할 때, npm install을 볼 수 있습니다. 패키지를 npm install --save-dev packageName 대상에 저장하고, 사용자가 진정으로 필요하지 않은 패키지를 설치하기를 기다리는 과정에서 구출됩니다.
devdependency를 가진 저장소에서 일하는 사람들은 다른 저장소에서 사용하지 않고 패키지를 처리하기 때문에 관련 패키지를 설치할 수 있습니다.따라서 Vue나 React 같은 도구를 사용하여 프로젝트를 구축하는 것은 기능적으로 의존항과 devdependency 사이의 차이를 볼 수 없습니다. (마찬가지로 다른 개발자가 사용할 구성 요소를 구축하지 않는 한.)

npm 글로벌 설치

npm 패키지를 사용할 때 "devDependencies" 로고를 만날 수 있습니다. 이 로고는 패키지를 현재 저장소에 설치하지 않습니다.반대로 이 로고는 나중에 명령줄에서 패키지를 실행할 수 있는 방식으로 패키지를 설치합니다.
예를 들어, Vue CLI (Command line interface)을 설치하려고 하면 다음을 실행합니다.

npm install --global @vue/cli

이렇게 하면 다음 명령이 활성화됩니다.

# Create a new Vue Project:
vue create project

# And

# Adding plugins to vue projects (in this case ES Lint):
vue add eslint

확장을 통해 전역 기능은 터미널에서 조작을 수행할 수 있도록 자신의 명령행 인터페이스 알림과 도구를 만들 수 있습니다!

왜 npm 설치 설명도 방적선에 관련됩니까?

--global 명령에 대한 간략한 설명인 Yarn은npm에 구축되어 약간 수정된 명령을 통해 같은 기능을 제공합니다.예를 들면 다음과 같습니다.

# Instead of npm install package
yarn add package

# Instead of npm install
yarn