실제로 npm 스크립트를 실행하는 더 좋은 방법이 있습니다

모든 프런트엔드 프로젝트에는 npm 스크립트가 있습니다. 우리는 npm 스크립트를 사용하여 컴파일, 패키징, Lint 및 기타 작업을 구성합니다. [관련 튜토리얼 권장 사항: nodejs 비디오 튜토리얼]

npm 스크립트를 자주 실행하지만 이러한 명령줄 도구가 어떻게 구현되는지 모릅니다.

그러면 이러한 도구의 구현 원리를 이해하려면 어떻게 해야 할까요?

오늘의 주제는 npm 스크립트 디버깅입니다.

사용 가능한 명령을 선언하기 위해 이러한 명령줄 도구의 package.json에 bin 필드가 있습니다.

npm이 이 패키지를 설치한 후 node_modules/.bin 디렉터리에 배치됩니다.

이러한 방식으로 노드 ./node_modules/.bin/xx를 통해 다양한 도구를 실행할 수 있습니다.

npx xx와 같은 npx를 사용하여 실행할 수도 있습니다. 그 기능은 node_modules/.bin에서 로컬 명령을 실행하는 것입니다. 그렇지 않은 경우 npm에서 다운로드한 다음 실행됩니다.

물론 가장 일반적으로 사용되는 방법은 npm 스크립트에 넣는 것입니다.

이런 방법으로 npm run xxx를 직접 실행하면 됩니다.

npm 스크립트는 기본적으로 노드를 사용하여 이러한 스크립트 코드를 실행하므로 이를 디버깅하는 것은 다른 노드 코드를 디버깅하는 것과 다르지 않습니다.

즉, 다음과 같이 실행할 수 있습니다.

.vscode/launch.json의 디버깅 파일에서 노드의 시작 프로그램을 선택합니다.

노드를 사용하여 node_modules/.bin 아래의 파일을 실행하고 매개변수를 전달하세요.

사실 더 간단한 방법이 있습니다. VSCode 디버거는 npm 스크립트 디버깅 시나리오를 캡슐화합니다. npm 유형 디버깅 구성을 직접 선택할 수 있습니다.

직접 실행할 명령을 지정하기만 하면 됩니다. :

예를 들어, create-react-app으로 생성된 이 반응 프로젝트를 사용하여 npm 스크립트 디버깅을 시도합니다.

먼저 node_modules/.bin으로 이동하여 이 파일에 중단점을 설정합니다.

그런 다음 디버그를 클릭하여 시작합니다.

스크립트 아래의 시작 모듈이 실행되는 것을 볼 수 있습니다.

시작하고 중단점을 설정해 보겠습니다.

여기서 코드 실행을 중단합니다.

이 구성은 webpack 구성입니다.

더 아래로 내려가면 서버가 시작되는 것을 볼 수 있습니다.

서버 시작의 콜백 함수에 중단점을 넣어 브라우저가 어떻게 열리는지 살펴보겠습니다.

이 중단점을 입력하려면 단계를 클릭하세요.

실행을 단계별로 진행하면 다음과 같은 코드에 도달하게 됩니다.

시작이 실패하면 차례로 osascript를 통해 브라우저를 시작하세요. try catch에서 무시됨:

다음 브라우저에 마우스를 가져가면 볼 수 있습니다.

중단점을 해제하면 브라우저가 열려 있는 것을 확인할 수 있습니다.

이러한 방식으로 정리된 반응 스크립트 시작 프로세스?

요약하면 다음과 같습니다.

• 입력된 시작 명령에 따라 스크립트/시작 모듈을 실행합니다.
• 구성에 따라 webpack의 Compiler 객체를 생성합니다.
• Create WebpackDevServer
• server 시작 후 브라우저를 시작하여 URL을 엽니다
• 구현 URL을 여는 것은 osascripts Browser

를 통해 순차적으로 시도해 보는 것입니다. 이렇게 디버깅하고 나면 npm run start에 대해 더 깊이 이해하게 될 것입니다.

또한 디버깅 모드에서 스크립트를 실행하는 것과 명령줄에서 직접 npm run start를 실행하는 것에는 차이가 없습니다.

차이점에 대해 이야기하고 싶다면 유일한 차이점은 다음과 같습니다.

기본 디버깅 모드에서는 출력 내용이 디버그 콘솔 패널에 표시됩니다.

그러나 이 내용도 변경할 수 있습니다.

integratedTerminal로 전환할 수 있으며, 그러면 터미널에 출력됩니다.

이렇게 하면 일반적인 npm run start 실행과 차이가 없으며 디버깅을 위한 중단점도 사용할 수 없습니다. 그거 좋은데?

vue cli로 생성된 vue 프로젝트와 같은 예를 다시 살펴보겠습니다. vue.config.js에서 웹팩 구성을 변경할 수 있습니다.

하지만 기본 구성이 무엇인지 알고 싶다면 어떻게 해야 할까요? 콘솔.로그?

console.log 큰 개체를 인쇄하는 것은 좋지 않습니다.

일부 학생들은 더 보기 흉하고 문자열이 매우 긴 JSON.stringify를 사용한다고 말했습니다.

npm 스크립트를 디버깅하는 방법을 알고 있다면 어떨까요?

npm 유형 디버깅 구성을 추가할 수 있습니다.

그런 다음 중단점을 설정하고 디버그를 실행합니다.

모든 구성을 볼 수 있습니다.

제가 제시한 예는 webpack에만 적용한 것인데, babel, tsc, eslint, vite 등 다른 npm 스크립트에서는 모두 동일한 디버깅 방법을 사용합니다.

요약

모든 프로젝트에는 npm 스크립트가 있습니다. 대부분의 사람들은 디버깅하지 않고 그냥 사용하기 때문에 매일 사용해도 이러한 도구의 원리를 모릅니다.

이 명령줄 도구는 package.json에서 bin 필드를 선언한 다음 설치 후 node_modules/.bin 아래에 넣습니다.

노드 node_modules/.bin/xx로 실행할 수 있고, npx xx로 실행할 수 있으며, 가장 일반적으로 사용되는 것은 npm 스크립트이며, npm run xx로 실행합니다.

npm 스크립트 디버깅은 노드 디버깅이지만 VSCode Debugger는 단순화되어 npm 유형의 디버깅 구성을 직접 생성할 수 있습니다.

콘솔을 통합 터미널로 구성한 후 터미널에 로그가 출력되는데 이는 npm run xx를 직접 실행하는 것과 다르지 않습니다. 실행 논리를 보기 위해 중단점을 지정할 수도 있습니다.

npm 스크립트를 실행하는 것 외에도 구현 로직을 정리하고 관심 있는 부분에서 중지할 수도 있습니다. 직접 실행하는 것보다 낫지 않나요?

노드 관련 지식을 더 보려면 nodejs 튜토리얼을 방문하세요!

위 내용은 실제로 npm 스크립트를 실행하는 더 좋은 방법이 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!