TypeScript 파일이 변경될 때 ts-node를 감시하고 다시 로드하는 방법

IT이야기

TypeScript 파일이 변경될 때 ts-node를 감시하고 다시 로드하는 방법

cyworld 2022. 3. 23. 00:42

TypeScript 파일이 변경될 때 ts-node를 감시하고 다시 로드하는 방법

매번 ts 파일을 전송하지 않고 TypeScript와 Angular 애플리케이션을 사용하여 dev Server를 실행하려고 한다.

내가 발견한 것은 내가 달릴 수 있다는 것이다..ts에 파일을 첨부하다.ts-node하지만 나는 또한 보고 싶다..ts파일을 저장하고 내 앱/서버를 다시 로드하십시오.이것의 예는 명령이다.gulp watch.

미리 고마워!!

이제 간단하게 할 수 있다.npm install --save-dev ts-node nodemon그리고 나서 뛰다nodemonA과 함께.ts파일만 작성하면 작동:

nodemon app.ts

이전 버전:

그 사실을 눈치채기 전까지 나는 내 개발 환경을 위해 같은 것을 위해 고군분투하고 있었다.nodemon의 API를 사용하면 사용자 지정 명령을 실행하기 위해 기본 동작을 변경할 수 있다.

예를 들어 의 최신 버전에 대해nodemon:

nodemon --watch "src/**" --ext "ts,json" --ignore "src/**/*.spec.ts" --exec "ts-node src/index.ts"

또는 생성nodemon.json다음과 같은 내용으로 파일을 정리한다.

{
  "watch": ["src"],
  "ext": "ts,json",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./src/index.ts"      // or "npx ts-node src/index.ts"
}

그리고 나서 뛰다nodemon논박도 없이

이렇게 함으로써 a를 다시 실어나를 수 있게 된다.ts-node기본 구현에 대해 걱정할 필요 없이 프로세스 수행

건배!

그리고 훨씬 더 오래된 버전의nodemon:

nodemon --watch 'src/**/*.ts' --ignore 'src/**/*.spec.ts' --exec 'ts-node' src/index.ts

또는 더 나은 기능: 노데몬의 구성을nodemon.json다음 내용으로 파일을 작성한 후 실행하십시오.nodemon, 산도칸이 제안한 대로 다음과 같다.

{
  "watch": ["src/**/*.ts"],
  "ignore": ["src/**/*.spec.ts"],
  "exec": "ts-node ./index.ts"
}

버렸어nodemon그리고ts-node 더 훨씬 나 나 나 나 나 나 대 대 대 대 대 대 대.ts-node-dev https://https:///github.com/whitecolor/ts-node-dev

그냥 뛰어.ts-node-dev src/index.ts

여기 헤버의 대안이 있다.Npm 스크립트를 사용한 LZ의 대답.

나의package.json:

  "scripts": {
    "watch": "nodemon -e ts -w ./src -x npm run watch:serve",
    "watch:serve": "ts-node --inspect src/index.ts"
  },

-e깃발은 찾을 수 있는 범위를 설정한다.
-w감시 디렉터리 설정,
-x대본을 집행하다

--inspect에서watch:serve스크립트는 실제로 node.js 플래그로, 디버깅 프로토콜만 활성화한다.

이것은 나에게 효과가 있다:

nodemon src/index.ts

이 당김 요청이 있은 후부터 분명히 덕분이었습니다: https://github.com/remy/nodemon/pull/1552

특히에에에에에에에 를 만들었다.tsc-watch도서관오후 6시에 찾을 수 있다.

분명한 사용 사례는 다음과 같다.

tsc-watch server.ts --outDir ./dist --onSuccess "node ./dist/server.js"

ts-node-dev를 사용할 수 있다.

필요한 파일이 변경될 때(표준 노드-dev로) 대상 노드 프로세스를 재시작하지만 재시작 사이에 Typecript 컴파일 프로세스를 공유한다.

설치

yarn add ts-node-dev --dev

그리고 네 소포도.json은 이렇게 될 수 있다.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "tsc": "tsc",
  "dev": "ts-node-dev --respawn --transpileOnly ./src/index.ts",
  "prod": "tsc && node ./build/index.js"
}

추가하다"watch": "nodemon --exec ts-node -- ./src/index.ts"로scripts너의 일부분package.json.

했다

"start": "nodemon --watch 'src/**/*.ts' --ignore 'src/**/*.spec.ts' --exec ts-node src/index.ts"

그리고 실부터 시작해서..ts-노드가 'ts-node'와 같지 않음

나는 ts-node를 사용하지 않고 항상 dist 폴더에서 실행하는 것을 선호한다.

그렇게 하려면 패키지를 설정하십시오.기본 구성의 json:

....
"main": "dist/server.js",
  "scripts": {
    "build": "tsc",
    "prestart": "npm run build",
    "start": "node .",
    "dev": "nodemon"
  },
....

그런 다음 nodemon.json 구성 파일을 추가하십시오.

{
  "watch": ["src"],
  "ext": "ts",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "npm restart"
}

여기서 "실행"을 사용함: "npm 다시 시작"
그래서 모든 ts 파일은 js파일로 재프로그래밍되었다가 서버를 재시작한다.

개발 환경에서 실행하려면

npm run dev

이 설정을 사용하면 항상 분산된 파일에서 실행되며 ts-노드가 필요하지 않다.

이것을 너의 소포에 추가해라.json 파일

scripts {
"dev": "nodemon --watch '**/*.ts' --exec 'ts-node' index.ts"
}

그리고 이 작업을 수행하려면 ts-노드도 dev-drivate로 설치해야 한다.

yarn add ts-node -D

달리다yarn dev개발 서버를 시작하다

또 다른 방법은 감시 모드에서 코드를 먼저 컴파일하는 것이다.tsc -w그리고 나서 자바스크립트 위에 노데몬을 사용한다.이 방법은 ts-node-dev와 속도가 비슷하고 생산성이 높다는 장점이 있다.

 "scripts": {
    "watch": "tsc -w",
    "dev": "nodemon dist/index.js"
  },

기타 답변의 옵션 요약

노데몬 플러스 ts 노드는 상당히 안정적이지만 명시적으로 구성해야 하며 다소 느리다.
노드-dev + ts-노드는 노데몬보다 훨씬 적은 구성을 요구하지만 여전히 느리다.
ts-node-dev는 빠르지만 신뢰할 수 없음

대안 1: 노드에몬/노드-dev + ts-노드 + swc

ⓘ TL;DR: 가장 빠른

노데몬/노드-dev의 신뢰성과 ts-node-dev의 속도를 결합한 대안적인 옵션은 ts-node를 와 함께 사용하는 것으로, TypeScript 호환 트랜스필러 는 Rust에서 구현된 것으로 TypeScript 호환 트랜스필러로서 TypeScript 트랜스필러보다 "크게시브 더 빠른 순서"이다.

참고:swc형식 검사를 수행하지 않음. 대부분의 편집기에는 형식 검사가 내장되어 있으므로 허용 가능해야 하며 형식 검사는 여전히 빌드 프로세스의 일부여야 함.

노데몬 또는 노드 개발 설치(원하는 항목 중)
- 고개를 끄덕이다
```
npm install --save-dev nodemon 
```
- 노드-디브
```
npm install --save-dev node-dev 
```
swc 통합을 통한 ts-노드 설정

https://github.com/TypeStrong/ts-node#swc
1. 필요한 패키지 설치
```
npm install --save-dev ts-node @swc/core @swc/helpers regenerator-runtime
```
2. tsconfig.json에 추가
```
  "ts-node": {
    "swc": true
  }
```

노데몬 또는 노드-dev 실행(예:

nodemon --watch src src/index.ts

또는:

node-dev src/index.ts

대안 2: 노드에몬/노드-dev + ts-노드 트랜스파일오직

∘TL;DR: 빠르고 신뢰할 수 있는

표준 TypeScript 트랜스필러를 사용하기 때문에 이전 옵션보다 속도가 느린 대안이 있지만, 내 테스트에서는 여전히 노데몬/노드-dev + ts-노드보다 빠르다.

기본적으로 이전 옵션과 동일하지만 없음swc하여 기본 ts 방법이 사항 형식 확인을 비활성화하여 기본 제공 ts 노드보다 빠름(이 방법이 허용되어야 하는 이유에 대한 위의 참고 사항 참조).

위와 같이 Nodemon/node-dev 설치
ts-노드 설치
```
npm install --save-dev ts-node
```
사용하도록 tsconfig.json 수정transpileOnly
```
  "ts-node": {
    "transpileOnly": true
  }
```
위와 같이 노데몬/노드-디브 호출

대안 3: 노데몬 + tsc --증분

∘TL;DR: 빠르고, 신뢰할 수 있으며, 가장 적은 종속성, 더 까다롭다

이것은 이전의 대안들과 거의 같은 속도다.이 세 가지 옵션 중 가장 적은 종속성을 필요로 한다(노데몬, 그리고 TypeScript를 사용하는 경우 이미 설치한 TypeScript 컴파일러).

(이것이 노드-dev에도 효과가 있을 가능성이 있지만, 나는 그것을 보지 못했다.exec노드-개발에 대한 옵션)

단점으로는 좀 더 까다로울 수 있고, 내 테스트에서는dotenv내 것을 집어 들다.env지방 개발을 신청하다하지만 당신의 방식에 따라tsc빌드는 tsconfig.json으로 구성되어 있으며, 당신은 그것을 작동시키기 위해 약간의 곡예를 해야 할 수도 있다.

그러나 옵션이 있는 것은 좋은 일이므로, 여기에 다음과 같은 방법이 있다.

위와 같이 노데몬 설치
Tsconfig.json을 구성하여 TypeScript를 JavaScript로 전송

특히.noEmit로 설정해서는 안 된다true
예를 들어, TypeScript 파일이 변경될 때마다 증분 전송을 수행하도록 TypeScript 컴파일러를 실행하도록 노데몬 구성
```
"dev": "nodemon -e ts --watch src .env --exec \"tsc --incremental && node src/index.js\"",
```
심지어 제거할 수도 있다.--incremental더욱 단순화하지만, 노드에몬/노드-dev + ts-노드에 비견되는, 훨씬 더 느리게 끝날 것이다.

1단계: 간단한 설치 가능nodemon그리고ts-node (이미 완료한 경우)

npm install --save-dev nodemon ts-node

2단계: 패키지에서 시작 스크립트를 구성할 수 있다.json

"start": "nodemon ./src/app.ts"

지금 노데몬은 자동으로 프로젝트에서 유형자를 식별하여ts-node스스로 지휘하다사용하다npm start자동으로 컴파일/감시하고 다시 로드한다.

프로젝트에서 형식 지정 모듈과 같은 오류가 발생하는 경우단순하게 프로젝트 폴더에서 이 명령어를 사용하십시오.

npm link typescript

사용할 때 문제가 있는 경우"type": "module"에package.json(https://github.com/TypeStrong/ts-node/issues/1007)에 나와 있는 경우 다음 구성 사용:

{
  "watch": ["src"],
  "ext": "ts,json",
  "ignore": ["src/**/*.spec.ts"],
  "exec": "node --loader ts-node/esm --experimental-specifier-resolution ./src/index.ts"
}

또는 명령행에서

nodemon --watch "src/**" --ext "ts,json" --ignore "src/**/*.spec.ts" --exec "node --loader ts-node/esm --experimental-specifier-resolution src/index.ts"

이 3가지 패키지를 업데이트하십시오.

nodemon, ts-node, typescript
yarn global add nodemon ts-node typescript

또는

npm install -g nodemon ts-node typescript

이제 이걸 실행하면 문제가 해결된다.

nodemon <filename>.ts

및 : 포함

nodemon --watch source --ext ts,json --exec "node --loader ts-node/esm ./source/index.ts"

참조URL: https://stackoverflow.com/questions/37979489/how-to-watch-and-reload-ts-node-when-typescript-files-change

'IT이야기' 카테고리의 다른 글

슬롯에서 카테고리 값을 가져오는 방법(일정관리 설정) (0)	2022.03.23
RxJS: shareReplay에서 bufferSize란? (0)	2022.03.23
python에서 float를 정수로 변환하는 가장 안전한 방법? (0)	2022.03.23
[False, True]에서 "not(참)"이 False를 반환하는 이유는? (0)	2022.03.23
(vue 구성 요소 대신) Javascript 파일에서 작업을 디스패치하는 방법? (0)	2022.03.22

현재글TypeScript 파일이 변경될 때 ts-node를 감시하고 다시 로드하는 방법

각종 프로그래밍 정보를 다루는 블로그입니다.

행사, c#, spring3, 여행, javascript, jQuery, 놀거리, 볼거리, 축제, 뮤지컬, 가족나들이, 펜션, 공연, 주말나들이, 유치원, 경기, 숙박, 관광, Java, 연극,

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

cyworld

TypeScript 파일이 변경될 때 ts-node를 감시하고 다시 로드하는 방법

TypeScript 파일이 변경될 때 ts-node를 감시하고 다시 로드하는 방법

기타 답변의 옵션 요약

대안 1: 노드에몬/노드-dev + ts-노드 + swc

대안 2: 노드에몬/노드-dev + ts-노드 트랜스파일오직

대안 3: 노데몬 + tsc --증분

'IT이야기' 카테고리의 다른 글

'IT이야기'의 다른글

티스토리툴바

TypeScript 파일이 변경될 때 ts-node를 감시하고 다시 로드하는 방법

TypeScript 파일이 변경될 때 ts-node를 감시하고 다시 로드하는 방법

기타 답변의 옵션 요약

대안 1: 노드에몬/노드-dev + ts-노드 + swc

대안 2: 노드에몬/노드-dev + ts-노드 트랜스파일오직

대안 3: 노데몬 + tsc --증분

'IT이야기' 카테고리의 다른 글

'IT이야기'의 다른글

관련글

티스토리툴바