NPM으로 생산성을 향상시키는 21 가지 방법

Sep 11, 2025
어떻게
21 ways to improve productivity with npm

노드 패키지 관리자 또는 짧은 NPM은 현대 자바 스크립트 세계에서 모두 사용됩니다. 일반적으로 최소한의 문제로 직업을 수행 할 때 개발자는 그것을 사용하는 데 소비 된 시간을 잊어 버리는 경향이 있습니다. 이것이 큰 문제가 아니지만 NPM에는 당신에게 많은 귀중한 시간을 절약하기위한 것으로 의도 된 매우 멋진 기능 세트가 포함되어 있습니다.

대부분의 다른 최적화와 마찬가지로 모든 측정 값이 보편적으로 적용되는 것은 아닙니다. 다음 단계는 생산성을 향상시킬 수있는 잠재력이 있거나 대기 시간을 줄이거 나 줄일 수있는 잠재력을 갖는 몇 가지 '아는 것'을 보여줍니다.

일부 보편적 인 시간 절약을 원하십니까? 최고의 가이드 웹 사이트 빌더 사이트를 만들어 낼 것입니다. 클라우드 스토리지 협업 프로세스를 간소화하고 괜찮을 것입니다 웹 호스팅 끝나지 않아도됩니다.

  • 20 훌륭한 jquery 플러그인

'빠른 NPM'의 기술을 연구하는 것은 그 자체로 끝이 아닙니다. 더 많은 완료를하고 고급 콘솔 기술을 보여주는 것 외에도 동료와 가능한 채용자를 인상을주는 확실한 방법은 오늘날의 하이퍼 경쟁력있는 작업 공간에서, 모든 작은 삶의 바로 가기가있는 구경꾼을 감동시키는 것은 훌륭한 방법입니다. 러시.

마지막으로, 어떤 사람들은 워크 플로우를 최적화하는 것을 기쁘게합니다. 그래서 짧게 NPM을 조정할 수있는 방법을 살펴보십시오. 여기에 가장 좋은 NPM-WACKS가 있습니다.

  • Node.js 10의 새로운 기능은 무엇입니까?

01. 진행률 막대를 죽이십시오

NPM 작업이 매우 시간 집약적 일 수 있으므로 진행률 표시 줄이 나타납니다. 슬프게도, 시간이 걸립니다. 어떤 경우에는 시간의 최대 50 %가 사용자 인터페이스를 업데이트하는 데 소요됩니다. 다행히도 진행 환경 변수를 false로 설정하여 진행률 표시 줄을 제거 할 수 있습니다. 

 Tamhan @ Tamhan-ThinkPad : ~ / 노드 스페이스 / FutuRenpm $
NPM Set Progress = False입니다
Tamhan @ tamhan-thinkpad : ~ / 노드 스페이스 / futurenpm $
NPM 진행 상황을 얻으십시오
거짓

02. 타이핑하지 않고 스폰 패키지

21 ways to improve productivity with npm: Spawn packages without typing

node.js는 기본 package.json을 생성합니다

반복적 인 핵심을 반복하고, 리턴 키의 망치는 새로운 NPM 프로젝트의 생성을 훨씬 넓게 수반합니다. 이것은 완전히 불필요합니다 - 단순히 매개 변수를 전달하십시오 -와이 배포 도우미가 제공하는 모든 기본값을 확인하려면. node.js 위의 이미지에 표시된 내용이있는 기본 package.json을 생성합니다. 

 Tamhan @ Tamhan-ThinkPad : ~ / 노드 공간 /
FASTNODETEST $ NPM init -y

03. 명령을 입력하지 마십시오

노드 명령은 동사와 하나 이상의 매개 변수로 구성됩니다. 일반적으로 사용되는 것들 - '설치'가 곧바로 마음에 들리고 짧은 단일 문자 약어로 대체 될 수 있습니다. 기술적 인 관점에서, NPM I. 과 NPM 설치 동일합니다. 유일한 차이점은 입력하는 데 필요한 입력 양입니다. 

 NPM 설치 GULP-DEBUG.
npm i gulp-debug

04. 다른 동사를 죽여라

21 ways to improve productivity with npm: Kill other verbs too

짧은 양식을 사용하면 NPM 기술을 보여주는 좋은 방법입니다.

부수적으로, 설치 속도가 높아야하는 유일한 명령이 아닙니다. 그림의 명령 목록의 출력을주의 깊게 살펴보면 구성, 테스트, 검색 및 여러 다른 동사가 약어 치료를 얻을 수 있습니다. 이러한 짧은 형태를 사용하는 것은 NPM 능력을 보여주는 좋은 방법입니다. 특히 처음으로 사용하기 전에 설명하십시오.

05. 모든 종속성을 나열하십시오

패키지 A에 의존하는 패키지 B가 오히려 지루한 경향이 있는지 여부를 알아보십시오. 그러나 NPM은 이것을 기본적으로 알고 있으며 기꺼이 지식을 당신과 함께 공유합니다. 간단히 입력하십시오 npm ls. 모든 종속성 및 해당 하위 종속성의 트리와 같은 표현으로 터미널을 홍수하거나이를 통과시켜 나무의 깊이를 제한 할 수 있습니다. --depth = 0. ...에 

 Tamhan @ Tamhan-ThinkPad : ~ / 노드 공간 /
$ NPM LS --DEPTH = 0.
[email protected] / home / tamhan / ndeespace.
└ - [email protected]

06. 오래된 패키지를 감지합니다

오늘날의 웹 응용 프로그램은 결코 끝나지 않는 공격으로 인해 일어나지 않는 우박에 있습니다. 노드 기반 프로젝트에서 오래된 종속성을 찾는 것처럼 쉽게 입력 할 수 있습니다. npm 오래된 - 프로그램이 캐시를 확인하고 목록을 제공합니다. opperaged. 패키지. 

 Tamhan @ Tamhan-ThinkPad : ~ / 노드 공간 /
PastifyTest $ npm 구식
패키지 현재 위치가 필요했습니다
1.11.2 1.13.3 1.13.3 NODESPACE를 발동하십시오

07. 소스를 찾으십시오

21 ways to improve productivity with npm: Find the source

Github 저장소의 패키지에 대한 유용한 샘플 및 문서 찾기

대부분의 NPM 패키지는 GitHub 저장소 안에 살고 있습니다. 이러한 웹 사이트는 일반적으로 패키지 소스 코드를 제공하는 것으로 제한되지 않습니다. 대부분의 경우 유용한 샘플 및 문서를 찾을 수도 있습니다. repo & lt; packagename & gt를 입력하여 패키지와 관련된 URL을 엽니 다. - 대부분의 경우 리포지토리 웹 사이트가 워크 스테이션 브라우저에 나타납니다. 

 Tamhan @ tamhan-thinkpad : ~ / 노드 스페이스 $ npm repo

08. 패키지 검사

21 ways to improve productivity with npm: Inspect a package

NPM보기를 입력하면 귀중한 정보를 얻을 수 있습니다

패키지 매니페스트 파일에는 소중한 정보가 들어 있습니다. NPM보기 또는 속기를 입력하십시오 V 이 단계를 수행하는 스크린 샷에 묘사 된 개요를 보여줍니다. 다른 것들 중에서 일반적으로 배포 형식 및 관리자에 대한 정보와 함께 최신 베타와 안정적인 버전에 대해 알아볼 것입니다. 

 Tamhan @ Tamhan-ThinkPad : ~ / 노드 스페이스 $ NPM보기
jquery

09. 정확한 이름을 찾으십시오

수반되는 수치 단계 (08)는 48 개의 버전의 라이브러리가 이용 가능하다는 것을 알리는 진술을 도시한다. 그들의 정확한 이름을 찾는 것은 전문화 된 버전을 통해 가장 잘 수행됩니다. NPM V. - 알려진 모든 문자열 목록을 덤프합니다. 이 단계를 수반하는 목록은 인쇄 가능성 이유로 약어야 함을 명심하십시오. 

 Tamhan @ tamhan-thinkpad : ~ / 노드 스페이스 $ npm v
jQuery 버전
[ '1.5.1',
'1.6.2',
...에 ...에 ...에
'3.0.0-alpha1',
'3.0.0-beta1',
'3.0.0-RC1',
'3.0.0',
'3.1.0',
'3.1.1',
'3.2.0',
'3.2.1',
'3.3.0',
'3.3.1']
Tamhan @ tamhan-thinkpad : ~ / 노드 스페이스 $

10. 알 수없는 패키지 이름을 찾으십시오

21 ways to improve productivity with npm: Find unknown package names

패키지 이름을 모르면 검색 명령이 도움이 될 수 있습니다.

위에서 언급 한 많은 명령을 사용하려면 정확한 패키지 이름이 필요합니다. 어떤 이유로든지 알지 못하면 검색 명령이 도움이 될 준비가되었습니다. 하나 이상의 문자열이 필요하며 모든 패키지 이름을 표 형식으로 다소 연결합니다. 

 Tamhan @ tamhan-thinkpad : ~ / 노드 스페이스 $ npm
검색 vue

11. 더 자세히 검색하십시오

21 ways to improve productivity with npm: Search even more

원사는 NPM의 최선의 노력을 eled의 패키지를 찾을 수 있습니다.

NPM 검색은 유용한 리드를 반환하지 않아야합니다 원사 검색 엔진 논리적으로 다음 중지를 만듭니다. 더 강력한 로컬 검색 엔진의 미리보기이지만 그럼에도 불구하고 페이지 상단의 텍스트 상자에는 다른 엔진이 간과되는 경향이있는 패키지를 찾는 점이 있습니다.

12. 자동 완료를 추가하십시오

Microsoft의 IntelliSense는 한 번의 클릭 자동 완성의 이점을 가진 프로그래머 세대를 익히는 정액 제품이었습니다. NPM은 표시된 명령 순서를 통해 활성화가 수행되는 유사한 기능을 지원합니다. 그런 다음 탭을 눌러 입력을 자동 완성하십시오. 

 Tamhan @ tamhan-thinkpad : ~ / 노드 스페이스 $ npm
완료 & gt; & gt; ~ / .bashrc.
Tamhan @ Tamhan-ThinkPad : ~ / 노드 스페이스 $ 소스
~ / .bashrc

13. 하네스 구성 설정

21 ways to improve productivity with npm: Harness configuration settings

더 빨리 일을 수행하려면 기본값을 설정하십시오

위에서 언급 한 NPM Init 명령은 훌륭한 첫 번째 단계를 구성 설정 세계로 만듭니다. 두 가지 명령을 사용하여 새로 생성 된 모든 프로젝트 파일에서 사용되는 기본값을 설정하십시오. 

 NPM 구성 설정 init.author.name & lt; name & gt;
NPM 구성 설정 init.author.Email & lt; 이메일 & gt;

14. 지역 패키지에 링크하십시오

패키지에서 작업하는 개발자와 하나 이상의 제품을 기반으로 한 개발자는 NPM의 링크 기능을 사용해야합니다. 로컬 패키지 폴더를 프로젝트에 연결하는 SymLink를 생성합니다. 그렇게하면 변경 사항을 자동으로 전파합니다. 

 git clone & lt; pkgurl & gt;
CD & lt; pkgname & gt;
NPM 링크
CD ../site.
NPM 링크 & lt; pkgname & gt;

15. 특정 버전의 패키지를 가져옵니다

사용 NPM I. 일반적으로 찾을 수있는 패키지의 최신 버전을 배포합니다. 특정 버전을 따기도 가능합니다. 단순히 그를 사용하십시오 @ 운영자는 필요 사항을 지정하는 작업자 -이 단계에 수반되는 샘플은 특정 버전의 VUE를 필요로합니다. 

 Tamhan @ Tamhan-ThinkPad : ~ / 노드 스페이스 $ npm i
[email protected].
Tamhan @ tamhan-thinkpad : ~ / 노드 스페이스 $ npm i
vue @ beta

16. 모든 구성 설정을 나열하십시오

21 ways to improve productivity with npm: List all configuration settings

다음과 같은 다양한 구성 설정이 있습니다

전술 한 구성 시스템은 일련의 환경 변수와 함께 작동합니다. 입력하여 내용을 나열하십시오 NPM 실행 ENV. 결과를 쫓아냅니다 grep. 유용. 위의 이미지는 사용 가능한 몇 가지 설정을 보여줍니다. 

 Tamhan @ Tamhan-ThinkPad : ~ / 노드 스페이스 / NoDetest2 $
NPM 실행 env | grep npm_
npm_config_cache_lock_stale = 60000.
npm_config_ham_it_up =.
npm_config_legacy_bundling =.
npm_config_sign_git_tag =.
...에 ...에 .

17. 사용자 정의 변수를 만듭니다

NPM은 시스템에서 생성 한 변수를 제한하지 않습니다. 이 단계를 함께 제공하는 스 니펫은 자체 변수를 선언 할 수있는 파일을로드합니다. 

 "config": {
"build_folder": "./ dist"
}

18. 분노에 사용하십시오

위에서 언급 한 파일이 제자리에있을 때 새로 생성 된 변수는 동료와 마찬가지로 작동합니다. 다양한 명령에서 사용할 수 있으므로 비행을 맛볼 수있는 행동을 바꿀 수 있습니다. 

 "스크립트": {
"빌드": "Gulp Build --Dist $ npm_package_
config_build_folder "
}

19. 노드 .js 및 NPM 버전을 똑똑하게 관리합니다

일부 프로그램은 node.js 환경 또는 node.js 패키지 관리자의 특정 버전에 따라 다릅니다. 노드 버전 관리자로 이러한 문제 소스를 완화하십시오 여기에 문서화되었습니다 - 원 클릭 설치 스크립트 덕분에 시작하기 쉽습니다. 

 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket

웹 디자이너를위한 수상 경력이있는 컨퍼런스, 4 월 24 일부터 25 일까지 NYC로 돌아갑니다! 티켓을 예약하려면 이미지를 클릭하십시오

20. 설치하지 않고 실행하십시오

21 ways to improve productivity with npm: Run without installation

NPX로 즉시 패키지를 실행하여 시간을 절약하십시오

Scaffolding Generators 및 유사한 프로그램은 일반적으로 프로젝트의 평생 동안 한 번 실행됩니다. 수동으로 다운로드하고 실행하면서 지루해집니다. 노드 패키지 실행 또는 NPX는 즉시 패키지를 실행할 수 있습니다. 필요한 파일이 손에 없으면 프로그램은 실행을 시작하기 전에 단순히 다운로드하기 만하면됩니다. 

 Tamhan @ Tamhan-ThinkPad : ~ / 노드 스페이스 $ npx
CREATE-REAST-APP MY-APP

21. WiFi의 도랑

끝 부분에 가장 논란의 여지가있는 튠업 트릭을 넣으십시오. 라우터에 대한 유선 연결을 위해 WiFi를 방해하는 것은 각 왕복 여행에서 소중한 10 ~ 20 밀리 초를 자릅니다. 장기적으로 이러한 저축은 수백 개의 패키지 교환을 포함하는 작업을 볼 때 특히 추가됩니다.

이 기사는 원래 Creative Web Design Magazine의 문제 284에서 출판되었습니다. 웹 디자이너 ...에 여기 문제를 구입하십시오 또는 웹 디자이너를 구독하십시오 ...에

관련 기사:

  • Babel 7을 시작하십시오
  • 8 필수 프로토 타이핑 및 빌드 도구
  • 재사용 가능한 반응 구성 요소를 개발하십시오

어떻게 - 가장 인기있는 기사

Photoshop의 스토리 보드 방법

어떻게 Sep 11, 2025

(이미지 크레디트 : 마크 Evan Lim) Photoshop의 스토리 보딩은 아이디어를 맵핑 할 수있는 좋�..

현지 개발 환경을 설정하는 방법

어떻게 Sep 11, 2025

(이미지 크레디트 : 미래) 로컬 개발 환경을 사용하면 자신의 컴퓨터를 사용하여 웹 사이..

ARM을 그리는 법

어떻게 Sep 11, 2025

(이미지 크레디트 : 패트릭 J 존스) 현실적인 것처럼 보이는 팔을 그리는 법을 배우는 것�..

VR 아트 레벨 업

어떻게 Sep 11, 2025

나는 1 년 전 VR 헤드셋을 얻은 후 영화 4D를 몇 달 전에 사용하기 시작했습니다. 그때까지 나는 그�..

블렌더에서 복잡한 3D 공상 과학 장면을 짓는다

어떻게 Sep 11, 2025

Apocalyptic Sci-Fi 도시 장면 만들기 3D 아트 예술가들이 주제의 광대 한 복잡성으로 인해 �..

5 분 이내에 그림을 그립니다

어떻게 Sep 11, 2025

5 분 포즈를 스케치하는 것은 포즈의 강한 감각을 포착 할 충분한 시간을 할애하기 때문에 많은 즐거움이 있지만 그 그림을 과로 할 때 충분한 �..

Zbrushcore에서 디지털 방식으로 조각하는 방법

어떻게 Sep 11, 2025

Zbrushcore (단일 사용자 라이센스로 $ 149.95) 단순화 된 버전입니다 히브루스 디�..

DAZ Studio와 Zbrush 사이를 이동하는 방법

어떻게 Sep 11, 2025

신규 이민자에게 히브루스 인터페이스는 다른 3D 모델링 프로그램과 매우 다르게 보이..

카테고리