NPM 명령은 무엇입니까?

패키지 관리자 인 NPM은 Grunt 및 Gulp와 같은 도구를 실행하는 이전 명령 줄 작업과 유사한 작업을 실행할 수 있습니다. 이전 장에서 SASS 패키지를 설치 한 후에는 사용을 시작할 수 있습니다!

가이드 챕터

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

심층적 인 NPM 명령

Test Folder에서 package.json 파일을 열면 현재 많은 dependencies 가 표시되지 않으며 현재 하나의 종속성 만 있습니다.

 <code>{ "dependencies": { "sass": "^1.43.4" } }</code>

그러나 package.json 파일에는 종속성보다 훨씬 많은 것이 포함되어 있습니다. 또한 프로젝트에 대한 많은 메타 정보가 포함되어 있습니다. 그것의 가장 흥미로운 부분은 scripts 라고하는 선택적이지만 매우 유용한 속성입니다.

SASS의 모든 하위 의존성은 자동으로 생성 된 package-lock.json 에 기록되며 수동으로 편집해서는 안됩니다. package.json 일반적으로 최상위 종속성 만 포함되며 자유롭게 사용자 정의 할 수 있습니다.

package.json 파일의 scripts 객체를 사용하면 프로젝트에서 실행할 수있는 명령을 작성하여 단일 실행 또는 지속적인 실행 프로세스 등 다양한 작업을 처리하는 데 도움이됩니다. 일반적으로 이러한 "작업"은 로컬로 개발 된 개발 서버를 시작, 리소스 컴파일 및/또는 실행 테스트를 시작하는 데 사용됩니다. 실제로 start 또는 dev 명령은 종종 SASS 및 JavaScript를 순서대로 컴파일하는 등 동시에 실행해야 할 모든 작업을 처리하기위한 프로젝트에 내장됩니다.

아직 실행할 스크립트가 없지만 문제를 해결합시다!

예 : SASS를 CSS로 컴파일하십시오

package.json 파일의 scripts 섹션에서 설치된 모든 패키지에 액세스 할 수 있습니다. SASS 명령을 지금 터미널에 직접 입력 할 수 없더라도 NPM 스크립트의 일부로 SASS 명령을 실행할 수 있습니다.

SASS가 전역으로 설치된 경우 (특정 프로젝트 폴더가 아닌 시스템 전체 설치를 의미하는 경우) 터미널에서 SASS 명령을 실행할 수 있습니다. 지금 까지이 폴더에 SASS 만 설치했습니다 (패키지를 설치할 때 기본 동작입니다). 그러나 글로벌 설치로 인해 시스템의 어느 곳에서나 SASS 명령을 사용할 수 있습니다.

먼저,이 코드 블록을 { 직후 바로 package.json 파일에 붙여 넣습니다.

 <code>"scripts": { "sass:build": "sass style.scss style.css" },</code>

JSON 구문은 매우 엄격합니다. 문제가있는 경우 JSON 유효성 검사기를 사용하여 파일의 내용을 실행해보십시오.

이를 통해 <code>npm run sass:build</code> Script에 액세스 할 수 있습니다.

명령의 이름은 연속 문자열 인 한 중요하지 않습니다. 또한 콜론 (:) build 여기에서 sass 영향을 미치지 않습니다.

이전에 SASS 명령을 사용한 경우 (또는 미리 살펴 보았다면) 이것은 프로젝트 폴더의 루트에 style.scss 파일을 만들어야한다는 것을 알 수 있습니다. 이렇게하고 임의의 SASS 코드를 넣으십시오.

복사하여 붙여 넣으려면 여기에 사용하는 Sass 코드가 있습니다.

 <code>$myColor: #ffd100; .a { .nested { .selector { color: $myColor; } } }</code>

기이! 프로젝트 루트 디렉토리에 파일을 style.scss 로 저장 한 다음 새 명령을 실행하십시오.

 <code>npm run sass:build</code>

이 작업이 완료되면 프로젝트 폴더에 style.css 및 style.css.map 에 두 개의 새 파일이 나타납니다.

원하는 경우 style.css 파일 (컴파일 된 CSS 코드 포함)을 열어서 실제로 기대하는지 확인할 수 있습니다.

SASS 패키지는 우리를 위해 소스 맵을 컴파일하므로 브라우저의 DevTools에서 스타일을 확인할 때 어떤 스타일의 .scss 파일이 있는지 확인할 수 있습니다. 엄청난!

오류가 발생하면 : package.json 에서 구문을 두 번 확인하여 유효한 JSON (여기에서 온라인 JSON 유효성 검사기를 사용할 수 있음)을 확인하고 .scss 파일에는 유효한 SASS (온라인 SASS 변환기)가 포함되어 있습니다. 확인해야 할 또 다른 사항은 파일 이름이 명령의 파일 이름과 일치하는지 여부입니다.

개발 전용 명령을 만듭니다

이것은 좋지만 개발을 할 때 명령을 반복해서 실행하는 데 질려있을 수 있습니다. Sass에게 Sass에게 파일을 모니터링 하고 변경 사항을 저장할 때 자동으로 다시 컴파일하라고 지시하여 두 번째 명령을 설정하겠습니다!

package.json 의 scripts 객체에 다음을 추가하십시오.

 <code>"sass:watch": "sass style.scss style.css --watch"</code>

중요 참고 : 두 스크립트 사이에 쉼표 (,)가 있는지 확인하십시오. 주문은 중요하지 않지만 그들 사이의 쉼표는 중요합니다. 다시, JSON은 매우 엄격하므로 필요한 경우 JSON 유효성 검사기에 의존하십시오.

이제 sass:watch (Sasquatch와 혼동하지 않으려는 경우), "Sass가 변경 사항을 모니터링하고있는 메시지가 표시되는 메시지가 표시됩니다. CTRL-C를 눌러 중지하십시오"라는 메시지가 표시됩니다.

이제 style.scss 파일을 열면 변경하고 저장하면 터미널에서 SASS가 CSS에 다시 컴파일되었음을 확인하는 메시지가 자동으로 나타나는 메시지가 표시됩니다.

이제 이것은 유용합니다! 뿐만 아니라,이 파일을 저장소에 제출하면 SASS를 설치하고 실행하는 정확한 지침이 있으며이 프로젝트에 관련된 다른 모든 사람들과 마찬가지로 간단한 명령을 사용합니다.

우리는이 테스트 프로젝트를 종료 할 것입니다. 시작하는 방법을 보는 것이 유용하지만 대부분의 경우 NPM 명령을 처음부터 작성하는 대신 미리 구성된 프로젝트를 사용합니다. 이는이 NPM 가이드의 마지막 장에서 정확히 무엇을 할 것입니다.

NPM 패키지 설치를위한 최종 지침

NPM 패키지를 설치하는 방법에는 실제로 두 가지가 있다는 것을 알아야합니다. 원하는 패키지는 패키지가 생산 빌드의 일부 여부에 따라 또는 순수한 개발 목적인지 여부에 따라 다릅니다.

• npm install (또는 npm i )는 프로젝트에 패키지를 추가하기위한 표준 (및 기본) 방법입니다.
• npm install --save-dev (또는 npm i -D )는 "개발 종속성"에 패키지를 추가합니다. 즉, 프로젝트가 개발 될 때만 설치되며 프로젝트의 최종 생산 버전이 구축 될 때만 설치됩니다.

개발 종속성으로 설치된 패키지에는 테스트 라이브러리, 코드 점검 도구, 미리보기 서버 및 개발 중에 만 도움이되는 기타 도구가 포함될 수 있습니다. 일반적으로 웹 사이트 자체를 컴파일하거나 실행하는 데 사용되지 않습니다.

npm install --global (또는 npm i -g ). Sass를 이전에 설치할 때 논의한 것처럼 전 세계적으로 패키지를 설치하는 방법입니다. 예를 들어, 기계의 어느 곳에서나 sass 실행할 수 있으려면이 방법을 사용할 수 있습니다. 글로벌 설치의 다른 일반적인 사용 사례에는 어디서나 사용하려는 CLI 도구 또는 Yarn과 같은 다른 패키지 관리자가 포함될 수 있습니다.

다음 단계

우리는 여행을 끝내려고합니다! 더 이상 알아야 할 사항과 NPM을 사용하여 기존 프로젝트를 신속하게 시작하는 데 필요한 모든 것. 따라서 NPM을 사용하여 프로젝트를 상속받을 수 있다고 가정하십시오. 어디서 시작 했어? 다른 사람들과 계속 일할 수 있도록하려면 어떻게해야합니까? 이것은이 NPM 가이드의 마지막 섹션의 초점입니다.

← 7 장 9 장 →

위 내용은 NPM 명령은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!