วิธีดูและโหลดซ้ำโหนดเมื่อไฟล์ TypeScript เปลี่ยน


192

ฉันพยายามเรียกใช้เซิร์ฟเวอร์ dev ด้วย TypeScript และแอปพลิเคชัน Angular โดยไม่มีการแปลงไฟล์ ts ทุกครั้ง ฉันพบว่าฉันสามารถทำงานได้ด้วยts-nodeแต่ฉันยังต้องการดู.tsไฟล์และโหลดแอป / เซิร์ฟเวอร์อีกครั้งเหมือนที่ฉันทำกับสิ่งที่ชอบดูอึก

คำตอบ:


404

ฉันกำลังดิ้นรนกับสิ่งเดียวกันสำหรับสภาพแวดล้อมการพัฒนาของฉันจนกว่าฉันจะสังเกตเห็นว่าnodemonAPI ของช่วยให้เราสามารถเปลี่ยนพฤติกรรมเริ่มต้นเพื่อดำเนินการคำสั่งที่กำหนดเอง ตัวอย่างเช่น:

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

หรือดียิ่งขึ้น: ปรับการตั้งค่าของ nodemon ให้เป็นnodemon.jsonไฟล์ที่มีเนื้อหาต่อไปนี้จากนั้นเรียกใช้nodemonตามคำแนะนำของ Sandokan:

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

เมื่อทำเช่นนี้คุณจะสามารถโหลดซ้ำts-nodeกระบวนการโดยไม่ต้องกังวลเกี่ยวกับการใช้งานพื้นฐาน

ไชโย!

อัปเดตสำหรับ nodemon เวอร์ชันล่าสุด:

สร้างnodemon.jsonไฟล์ที่มีเนื้อหาดังต่อไปนี้

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

ถ้าindex.tsเป็นตัวอย่างด่วนฉันจะฆ่ามันและเริ่มใหม่ได้อย่างไร
hjl

@elaijuh ในทางทฤษฎีคำสั่งเดียวกันนี้ควรทำเคล็ดลับเมื่อ nodemon มีการกำหนดค่าให้รันคำสั่งที่กำหนดเอง (ในกรณีนี้ ts-node) แทนคำสั่งโหนดเริ่มต้นมันจะปิดกระบวนการและเริ่มใหม่ในแต่ละครั้ง ค้นหาการเปลี่ยนแปลงในนิพจน์นาฬิกาลบนิพจน์ละเว้น :)
HeberLZ

15
คุณยังสามารถสร้างไฟล์ nodemon.json พร้อมด้วยตัวเลือกที่กล่าวถึงทั้งหมดในรูปแบบนี้{ "watch": ["src/**/*.ts"], "ignore": ["src/**/*.spec.ts"], "exec": "ts-node ./app-server.ts" }และเพียงพิมพ์nodemon
Sandokan El Cojo

3
ฉันทำผิดพลาดในการเพิ่ม./ก่อนชื่อโฟลเดอร์และมันยากจน สิ่งนี้ได้ผลกับฉัน: { "verbose": true, "watch": ["server/**/*.ts"], "ext": "ts js json", "ignore": ["server/**/*.spec.ts"], "exec": "ts-node index.ts" }. และบรรทัดคำสั่ง:nodemon --watch server/**/*.ts --ignore server/**/*.spec.ts --verbose --exec ts-node index.ts
Adrian Moisa

2
ฉันอยากจะพูดถึงว่าคุณยังต้องตั้งค่าextในไฟล์กำหนดค่าเพื่อหาการเปลี่ยนแปลงที ไฟล์ปรับแต่งของฉันมีลักษณะดังนี้:{ "watch": ["src/**/*.ts"], "ignore": ["src/**/*.spec.ts"], "ext": "ts js json", "_exec": "node dist/startup.js", "exec": "ts-node src/startup.ts" }
Lasse D. Slot

114

ฉันทิ้งnodemonและts-nodeเป็นทางเลือกที่ดีกว่าts-node-dev https://github.com/whitecolor/ts-node-dev

เพียงแค่วิ่ง ts-node-dev src/index.ts


6
และทำไมถึงดีกว่านี้?
Deilan

22
มันเร็วกว่าและตรวจจับไฟล์ที่ต้องรับชมโดยอัตโนมัติโดยไม่ต้องตั้งค่าใด ๆ
Mikael Couzic

4
นี่คือตัวเลือกที่ดีที่สุด (ถ้าไม่ใช่เฉพาะ) สำหรับ ts-node โดยเฉพาะอย่างยิ่งสำหรับโครงการขนาดใหญ่ มันไม่ได้คอมไพล์ไฟล์ใหม่ทั้งหมดตั้งแต่ต้น แต่ทำการคอมไพล์ที่เพิ่มขึ้นเช่นtsc --watchกัน
Angelos Pikoulas

3
ในกรณีของฉันนี้แท้จริง 10 ครั้งเร็วกว่าด้วยnodemon ts-nodeขอบคุณ!
ฟลอเรียน

3
"start": "ts-node-dev src"ดังนั้นผมจึงมีเพียงตัวอักษร ไม่จำเป็นต้องใช้ babel, nodemon, หรือการกำหนดค่าใด ๆ ที่มาพร้อมกับมัน จัดการทุกอย่างให้คุณ
JMadelaine

53

นี่คือทางเลือกของคำตอบของHeberLZ โดยใช้สคริปต์ npm

ของฉันpackage.json:

  "scripts": {
    "watch": "nodemon -e ts -w ./src -x npm run watch:serve",
    "watch:serve": "ts-node --inspect src/index.ts"
  },
  • -e flag ตั้งค่าส่วนขยายให้มองหา
  • -w ตั้งค่าไดเรกทอรีเฝ้าดู
  • -x รันสคริปต์

--inspectในwatch:serveสคริปต์นั้นเป็นแฟล็ก node.js จริงๆมันแค่เปิดใช้งานการดีบักโปรโตคอล


2
นอกจากนี้ต้องแน่ใจว่าได้ติดตั้ง typescript แบบโลคัลสำหรับโครงการ มิฉะนั้นข้อผิดพลาดที่คุณอาจได้รับไม่ชัดเจนมาก
Aranir

ผมคิดว่ามันควรจะเป็นts-node --inspect -- src/index.tsในขณะนี้เนื่องจากการนี้
bluenote10 10

1
วิธีการนี้ดูเหมือนว่าจะสร้างผลลัพธ์ที่ไม่จำเป็นจำนวนมาก
Freewalker

-e ts -w ./srcเคล็ดลับสำหรับฉัน - สิ่งนี้ทำงานได้กับ loopback4 CLI สร้างโปรเจ็กต์
Jonathan Cardoz

16

โดยเฉพาะสำหรับปัญหานี้ฉันได้สร้างtsc-watchห้องสมุด คุณสามารถค้นหาได้ในเวลา 23.00 น .

กรณีการใช้งานที่ชัดเจนจะเป็น:

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


วิธีนี้จะทำงานในกรณีของเซิร์ฟเวอร์ express หรือ koa เนื่องจากไม่ได้ฆ่าอินสแตนซ์ของโหนดก่อนหน้านี้จริง ๆ
brianestey

'tsc-watch' ฆ่าและรีสตาร์ทกระบวนการสำหรับคุณ
gilamran

นี่คือสิ่งที่ฉันกำลังมองหา ไม่แน่ใจว่าจุดประสงค์ของ ts-node-dev คืออะไร แต่ฉันไม่สามารถรายงานข้อผิดพลาดของ typescript ได้ หลังจากใช้เวลาหลายชั่วโมงเพื่อให้มันทำงานได้ฉันลองใช้ tsc-watch และมันก็ใช้งานได้อย่างมีเสน่ห์
Charles Naccio

@gilamran ในเอกสารของแพ็คเกจของคุณมีการพิมพ์ผิด: "[...] similar to nodemon but for TypeCcript.":)
Massimiliano Kraus

13

สิ่งนี้ใช้ได้กับฉัน:

nodemon src/index.ts

เห็นได้ชัดว่าขอบคุณเนื่องจากคำขอดึงนี้: https://github.com/remy/nodemon/pull/1552


มันเหมาะกับฉันด้วย แต่จะเป็นอย่างไร ดูเหมือนว่ามีมนต์ขลัง การรวบรวม typescript คืออะไร ฉันไม่ได้ts-nodeติดตั้ง
d512

1
@ d512 คุณแน่ใจหรือว่ามันไม่ได้อยู่ในของคุณnode_modules/? สำหรับฉันมันล้มเหลวถ้าฉันไม่มี
DLight

1
สิ่งนี้ไม่จำเป็นต้องts-nodeติดตั้ง การรันคำสั่งนี้โดยไม่ts-nodeส่งผลให้เกิดfailed to start process, "ts-node" exec not foundข้อผิดพลาด node_modulesคุณน่าจะมีสิ่งนี้เป็นสิ่งประดิษฐ์ที่เหลือใน ที่ถูกกล่าวว่าวิธีการแก้ปัญหานี้จะดีกว่ามากเพราะมันไม่จำเป็นต้องมีการกำหนดค่าเพิ่มเติม
Brandon Clapp


7

คุณสามารถใช้ts-node-dev

มันรีสตาร์ทกระบวนการโหนดเป้าหมายเมื่อใด ๆ ของไฟล์ที่ต้องการเปลี่ยนแปลง (เป็นโหนดมาตรฐาน -DV) แต่แบ่งปันกระบวนการรวบรวม typescript ระหว่างการรีสตาร์ท

ติดตั้ง

yarn add ts-node-dev --dev

และ package.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"
}

ขอบคุณ! นี่เป็นวิธีที่ง่ายที่สุดที่ฉันพบเพื่อเปิดใช้งานการรีโหลดอัตโนมัติกับโหนดเซิร์ฟเวอร์ของฉัน
Hisham Mubarak

7

ฉันทำกับ

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

และเส้นด้ายเริ่ม .. ts-node ไม่เหมือนกับ 'ts-node'


1

ฉันต้องการที่จะไม่ใช้ ts-node และเรียกใช้จากโฟลเดอร์ dist เสมอ

ในการทำเช่นนั้นเพียงแค่ติดตั้ง package.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"
}

ที่นี่ฉันใช้"exec": "npm restart"
ดังนั้นไฟล์ ts ทั้งหมดจะทำการคอมไพล์ใหม่เป็นไฟล์ js จากนั้นรีสตาร์ทเซิร์ฟเวอร์

หากต้องการทำงานในสภาพแวดล้อม dev

npm run dev

การใช้การตั้งค่านี้ฉันจะเรียกใช้จากไฟล์ที่แจกจ่ายเสมอและไม่จำเป็นต้องใช้โหนดที


0

เพิ่มลงในไฟล์ package.json ของคุณ

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

และเพื่อให้งานนี้คุณต้องติดตั้ง ts-node เป็น dev-dependency

yarn add ts-node -D

รันyarn devเพื่อเริ่มเซิร์ฟเวอร์ dev

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.