만약 당신이 js나ts목표 노드를 작성하고 일상생활과 생산력을 개선하기를 원한다면, yey🎉 이 문장은 너에게 주는 것이다!

너무 길어서 읽을 수가 없어요.

개발자로서 우리의 일상생활은 보통 다음과 같은 두 가지 사이에서 끊임없이 왕복한다.

쓰기 코드

운행 단위 테스트

실행 작성된 코드 "for real"

이 교체 과정이 충분히 빠르면 작성과 테스트 사이에서 실시간 피드백 순환을 할 수 있다는 것을 알게 될 것입니다.
본고는 코드 라이브러리의 크기에 상관없이 웹 팩 HMR을 이용하여 NodeJS 서버와 Mocha 단원 테스트를 즉시 재부팅/재부팅/실행할 수 있도록 하는 방법을 설명합니다.
제가 말한 내용을 이해하기 위해 clone this repo을 사용하시고'개발'설명을 따를 수 있습니다. (참고로 제가 관리하는 작은 운영체제 라이브러리입니다.)

HMR은 무엇입니까? 어떻게 유용합니까?

만약 당신의 프로젝트가 충분하다면, 당신은 고통스러운 지연을 겪을 수도 있습니다...한 줄의 코드를 저장하는 데는 몇 초 이상 걸릴 수 있습니다.

단원 테스트를 다시 불러오거나

에서 로컬 호스트 서버를 다시 시작하여 이 코드를 테스트합니다.

모든 node\u 모듈 의존 항목을 포함하여 모든 코드 라이브러리를 node에서 재해석해야 하기 때문입니다.변경된 코드 한 줄에 대해 대량의 코드를 재분석하고 실행해야 한다.
이것이 바로 HMR(열모듈 재부팅)의 용무지이다.
나는 그것 (구글은 당신의 친구) 을 상세하게 소개하지는 않겠지만, 간단히 말하면, 이 생각은 당신의 서버가 계속 실행되고, 코드 파일을 저장할 때만 변경된 모듈을 다시 불러오는 것이다.간단한 변경 사항을 작성할 때 로컬 호스트 서버를 다시 시작할 필요가 없습니다.

깔끔했어HMR을 어떻게 설정합니까?

웹 패키지는 매우 좋은 방법이다.
이것은 일반적으로 웹 앱을 연결하는 클라이언트 개발 도구로 간주되지만, nodejs 응용 프로그램을 연결하는 데도 사용할 수 있습니다.
요컨대, HMR을 사용하려면 nodejs 서버에 웹 팩을 설정해야 합니다.이 점을 하려면, 나는 너에게 this sample repo을 가리켜 줄 수 있다.이것은 간단한 Typescript+Express 서버를 설정하기 위해 Webpack HMR+ 단원 테스트를 사용하는 방법을 보여 줍니다.
다음은 서버 코드를 변경할 때 코드 줄을 변경할 때 발생하는 상황입니다.

변경된 파일 (main.ts) 을 방금 다시 불러왔지만, 모든 의존 항목은 메모리에 있습니다.수백 개의 의존항과 수천 개의 코드 파일이 있다면, 이 방법을 사용하면 새 서버를 더 빨리 시작하고 실행할 수 있습니다.
그 배후의 흑마법에 대해 알아보려면:

webpack.config.js

main.ts의 끝

.vscode/launch.json

패키지 문서 about HMR

그렇게 복잡하지는 않지만 HMR이 순수한 마법은 아니라는 것을 알아야 한다.백그라운드에서 어떻게 작동하는지 이해하면 제약을 이해할 수 있다. (이것은 주로 다시 불러오지 않은 모듈이 정적 메모리 상태를 가지고 있기 때문이다. 이 상태는 HMR 재컴파일 사이에서 지속된다.)

제 단원 테스트를 다시 빠르게 진행하도록 해주세요.

NodeJS 프로젝트 (또는 모든 유형의 프로젝트) 를 개발하는 데 진지하면 단원 테스트를 작성할 수 있습니다.
만약 vscode를 IDE로 사용하고 Mocha를 단원 테스트 프레임워크로 사용한다면 mocha test explorer + mocha을 사용했을 수 있습니다
그렇다면 너는 운이 좋다🎉 공교롭게도 I forked the official mocha test adapter은 당신의 단원 테스트에 HMR 지원을 가져왔습니다.
우리는 우리 회사에서 이미 1년을 사용했는데, 그것은 매우 잘 작동하고, 매우 안정적이다. 만약 당신에게 어떤 문제가 있다면, 조금도 주저하지 않고 here을 써 주십시오.
그것 은 두 차례 목표 를 명중하는 지연 을 초래했다▶ 단원 테스트 단추 및 실제 클릭🔴 20초에서 0.5초의 단점🤯.
다음은 1000개의 단원 테스트를 실행하는 느낌입니다.

또는 디버깅:

... 좋은 소식은 당신의 코드 라이브러리에 수백만 줄의 코드, 수천 개의 의존항이 있고, 한 줄의 코드를 변경할 때 어떠한 지연도 겪지 않는다 하더라도, 그것도 이렇게 빠르다는 것이다.❤

설정

the aforementioned sample repository을 자세히 읽으면 HMR이 준비된 단원 테스트 설정도 정의되어 있음을 알 수 있습니다.
간단히 말하면 다음과 같습니다.

간단한 단원 테스트 입구점 파일을 만듭니다. 이 파일은 모든 단원 테스트 파일을 인용합니다. (context.require 사용)

이 항목 파일

을 사용하는 웹 가방 만들기

모차 테스트 어댑터에게 bulit 패키지를 HMR 패키지로 사용하라고 알려 via .vscode/config.js

에서 패키지 묶음 프로그램 (npm 시작) 을 실행하고 모든 테스트

을 다시 불러옵니다.
본 환매 협의의 설명을 읽어 주십시오. 그것은 반드시 기성품이어야 합니다.

반복 순환 체험을 개선하는 힌트

현재 실행 테스트는 상당히 빠를 것이다.
하지만, 당신은 여전히 클릭해야 합니다🐜 버튼▶ 테스트를 실행하려고 할 때마다나는 이것이 매우 번거롭다고 생각한다.
이 문제를 해결하기 위해서, 나의 이전 문장의 정신에 근거하다

마우스를 더 이상 만지지 않는 방법🐭

올리비에 짐바르・ 20년 8월 18일・ 3분 읽기

#productivity #vscode

나는 명령 test-explorer.rerun, test-explorer.reload, test-explorer.redebug과 test-explorer.run-this-test을 사용할 것을 건의합니다.
다음은 내 키 바인딩입니다.

    {
        "key": "ctrl+f5",
        "command": "test-explorer.rerun"
    },
    {
        "key": "ctrl+shift+f5",
        "command": "test-explorer.reload"
    },
    {
        "key": "ctrl+alt+f5",
        "command": "test-explorer.redebug"
    },
    {
        "key": "alt+shift+f5",
        "command": "test-explorer.run-this-test"
    },