סביבת פיתוח - כיצד לצפות ולהטען מחדש ts-node כאשר קבצי TypeScript משתנים

אני מנסה להפעיל שרת פיתוח עם TypeScript ויישום Angular מבלי להמיר את קבצי ts בכל פעם.

מה שמצאתי הוא שאני יכול להריץ קבצי .ts עם ts-node אבל אני גם רוצה לצפות בקבצי .ts ולרענן את האפליקציה/שרת שלי. דוגמה לכך היא הפקודה gulp watch.

תשובה #1

כעת אתה יכול פשוט npm install --save-dev ts-node nodemon ואז להפעיל nodemon עם קובץ .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 ללא ארגומנטים.

בזכות עשייה זו, תוכל לטעון מחדש בזמן אמת תהליך ts-node מבלי לדאוג למימוש התחתון.

וגם עם גרסאות ישנות יותר של nodemon:

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

או אפילו טוב יותר: להוציא את קובץ הקונפיגורציה של nodemon החוצה לקובץ nodemon.json עם התוכן הבא, ואז פשוט להריץ nodemon, כפי שסנדוקן הציע:

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

תשובה #2

עזבתי את nodemon ו־ts-node לטובת חלופה הרבה יותר טובה, ts-node-dev https://github.com/whitecolor/ts-node-dev

פשוט הרץ ts-node-dev src/index.ts

[עריכה] מאז שכתבתי את התשובה הזו, nodemon השתפר המון, ההגדרות הנדרשות הרבה יותר קלות עכשיו וביצועים הרבה יותר טובים. נכון לעכשיו אני משתמש בשניהם (בפרויקטים שונים, כמובן), ואני מרוצה משניהם.

תשובה #3

Node.js עכשיו תומך ב-TypeScript!

ל-Node נוסף תמיכה ב-TypeScript, אם כי היא עדיין ניסיונית: הרצת TypeScript באופן טבעי

כדי להשתמש בזה:

1. התקן את Node 22.7.0 או גרסה מתקדמת יותר

2. התחל את הצומת עם הדגלים המתאימים

   • לפחות, תצטרך להשתמש ב---experimental-strip-types
   • אם הקוד של TypeScript שלך משתמש ב-enum או ב-namespace, תצטרך גם להשתמש ב---experimental-transform-types

בהתאם להוספה של מצב צפייה, תוכלו לצפות ולטעון מחדש קבצי TypeScript ב-Node ללא כל כלים מיוחדים. לדוגמה, זה יאפשר לכם להריץ npm run dev בפרויקט שלכם כדי להריץ ולצפות בקבצי TypeScript ללא התקנת חבילות נוספות (typescript, tsx, ts-node, nodemon, וכו׳):

  "scripts": {
    "dev": "node --experimental-strip-types --watch src/index.ts"
  },

(שימו לב שאני עדיין ממליץ להשתמש במתרגם TypeScript כדי לבדוק סוגים כחלק מתהליך הבנייה שלכם כפי שמפורט למטה)

אפשרויות חלופיות

אם אתה לא מרגיש נוח להשתמש בתמיכת TypeScript של Node בזמן שהיא עדיין ניסיונית, הנה כמה המלצות נוספות.

לנוחות השימוש: tsx

tsx הוא הדרך הקלה ביותר להריץ TypeScript עם Node, אך יש לו יכולת קונפיגורציה מוגבלת. מתחת למכסה המנוע הוא משתמש ב-esbuild, מאחד קבצי JavaScript שנכתב ב-Go וגם מתרגם TypeScript.

1. התקן tsx

   npm install --save-dev tsx
   

2. עדכן את package.json שלך, לדוגמה

   "scripts: {
     "dev": "tsx watch src/index.ts",
   

3. רץ את זה

   npm run dev
   

   (התאם את הצעדים האלה אם אתה רק רוצה להתקין את tsx באופן גלובלי ולהריץ אותו ישירות)

לעוד אפשרויות קונפיגורציה: nodemon/node-dev + ts-node + swc

זה מהיר בדיוק כמו tsx ודורש יותר הגדרות אך גם יותר ניתנים להתאמה אישית. הוא מורכב משימוש ב-ts-node עם swc, מתרגם תואם TypeScript שמיושם ברסט וש„יותר מהיר בסדר גודל" מאשר מתרגם TypeScript.

1. התקן את nodemon או node-dev (כל אחד שתעדיף)

   • נודמון

     npm install --save-dev nodemon 
     

   • node-dev

     npm install --save-dev node-dev 
     

2. הגדר ts-node עם אינטגרציה של swc

   https://github.com/TypeStrong/ts-node#swc-1

   1. התקן חבילות נחוצות

      npm install --save-dev ts-node @swc/core @swc/helpers regenerator-runtime
      

   2. הוסף את זה ל-tsconfig.json

        "ts-node": {
          "swc": true
        }
      

3. הרץ את nodemon או node-dev, לדוגמה

   nodemon --watch src src/index.ts
   

   או :

   node-dev src/index.ts
   

הערה על בדיקת סוג

מעט מאוד כלים מחוץ לקומפיילר של TypeScript (tsc) מבצעים בפועל בדיקת טיפוסים; זה כולל את רוב הכלים הרשומים כאן, אפילו התמיכה הטבעית של Node ב-TypeScript. בדרך כלל זה לא מהווה בעיה כי רוב העורכים כוללים בדיקת טיפוסים מובנית, ובדיקת הטיפוסים עדיין צריכה להיות חלק מתהליך הבנייה שלך. ניתן גם לבצע בדיקת טיפוסים בנפרד לצד הבדיקות שלך או כהוק לפני דחיפה באמצעות tsc --noEmit.

תשובה #4

הנה אלטרנטיבה לתשובתו של 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 קובע את ההרחבות שיש לחפש,
• -w קובע את התיקייה הנצפית,
• -x מריץ את הסקריפט.

--inspect בסקריפט watch:serve הוא בעצם דגל של node.js, הוא רק מאפשר פרוטוקול ניפוי באגים.

תשובה #5

זה עובד בשבילי:

nodemon src/index.ts

לכאורה תודה ל- pull request הזה: https://github.com/remy/nodemon/pull/1552

תשובה #6

אתה יכול להשתמש ב-ts-node-dev

הוא מחדש את תהליך הצומת של היעד כאשר כל אחד מהקבצים הנדרשים משתנה (כמו node-dev סטנדרטי) אך משתף את תהליך הקומפילציה של 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"
}

תשובה #7

למען סוגיה זו יצרתי את הספרייה tsc-watch. ניתן למצוא אותה ב-npm.

מקרה שימוש ברור יהיה:

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

תשובה #8

הוסף "watch": "nodemon --exec ts-node -- ./src/index.ts" לחלק scripts בקובץ ה-package.json שלך.

תשובה #9

אני מעדיף לא להשתמש ב-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 ואז השרת יופעל מחדש.

להריץ בזמן שהסביבה היא סביבה לפיתוח,

npm run dev

באמצעות ההגדרה הזו אני תמיד ארץ מהקבצים המופצים ואין צורך ב-ts-node.

תשובה #10

גישה סטנדרטית

החל מגרסת Node.js v16.19.0 (דצמבר 2022), ממשק ה-CLI מציע את האפשרות --watch, מה שמבטל את הצורך בתלויות נוספות כמו nodemon.

לביצוע TypeScript, השתמש בחבילת ts-node המוכרת היטב. הנה דוגמת תצורה:

// package.json
{
    "scripts": {
        "dev": "node --watch --loader=ts-node/esm ./src/app.ts"
    },
    "devDependencies": {
        "ts-node": "~10.9.0"
    }
}

גישה לא סטנדרטית

חלופית, אתה עשוי לשקול את tsx, למרות שהוא לא מפותח כמו ts-node.

שימו לב ש־tsx כרגע לא תומך ב־emitDecoratorMetadata, תכונה חיונית להרבה פרויקטים שזקוקים לדקורטורים. למרות חיסרון זה, tsx מציע קומפילציה מהירה יותר (עם backend של esbuild):

// package.json
{
    "scripts": {
        "dev": "tsx watch ./src/app.ts"
    },
    "devDependencies": {
        "tsx": "~4.6.0"
    }
}