node.js - แปลงแพ็กเกจ TypeScript จาก workspace อื่นใน Turborepo โดยอัตโนมัติ

ฉันมีมอนอรีโปที่ใช้ Turborepo ซึ่งฉันมีแอปพลิเคชัน TypeScript หลักหนึ่งตัว (เรียกว่า @myscope/tsapp) ซึ่งใช้แพ็กเกจ TypeScript อีกตัวหนึ่งในรีโพซิทอรีเดียวกัน (เรียกว่า @myscope/tspackage) คุณสามารถดูรีโพซิทอรีตัวอย่างที่ฉันสร้างขึ้นสำหรับคำถามนี้ได้ที่นี่: https://github.com/sigalor/typescript-transpile-workspace-packages

ไฟล์ apps/tsapp/src/index.ts มีลักษณะดังนี้:

import { sum } from "@myscope/tspackage";

console.log("The sum is:", sum(2, 3));

และไฟล์ packages/tspackage/src/index.ts เพียงแค่ประกอบด้วยสิ่งนี้:

export function sum(a: number, b: number): number {
  return a + b;
}

ตอนนี้การรัน npm run dev ในโฟลเดอร์หลักของรีโพซิทอรีจะได้ผลลัพธ์ดังนี้:

> [email  dev
> turbo run dev

• Packages in scope: @myscope/tsapp, @myscope/tsconfig, @myscope/tspackage
• Running dev in 3 packages
• Remote caching disabled
@myscope/tsapp:dev: cache bypass, force executing 0f1217618b24762f
@myscope/tsapp:dev: 
@myscope/tsapp:dev: > @myscope/[email  dev
@myscope/tsapp:dev: > tsc-watch --onSuccess "node ./dist"
@myscope/tsapp:dev: 
@myscope/tsapp:dev: 
@myscope/tsapp:dev: 12:32:26 - Starting compilation in watch mode...
@myscope/tsapp:dev: 
@myscope/tsapp:dev: 
@myscope/tsapp:dev: 12:32:27 - Found 0 errors. Watching for file changes.
@myscope/tsapp:dev: /home/cmd/typescript-transpile-workspace-packages/packages/tspackage/src/index.ts:1
@myscope/tsapp:dev: export function sum(a: number, b: number): number {
@myscope/tsapp:dev: ^^^^^^
@myscope/tsapp:dev: 
@myscope/tsapp:dev: SyntaxError: Unexpected token 'export'
@myscope/tsapp:dev:     at internalCompileFunction (node:internal/vm:73:18)
@myscope/tsapp:dev:     at wrapSafe (node:internal/modules/cjs/loader:1176:20)
@myscope/tsapp:dev:     at Module._compile (node:internal/modules/cjs/loader:1218:27)
@myscope/tsapp:dev:     at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
@myscope/tsapp:dev:     at Module.load (node:internal/modules/cjs/loader:1117:32)
@myscope/tsapp:dev:     at Module._load (node:internal/modules/cjs/loader:958:12)
@myscope/tsapp:dev:     at Module.require (node:internal/modules/cjs/loader:1141:19)
@myscope/tsapp:dev:     at require (node:internal/modules/cjs/helpers:110:18)
@myscope/tsapp:dev:     at Object.<anonymous> (/home/cmd/Downloads/typescript-transpile-workspace-packages/apps/tsapp/dist/index.js:3:19)
@myscope/tsapp:dev:     at Module._compile (node:internal/modules/cjs/loader:1254:14)
@myscope/tsapp:dev: 
@myscope/tsapp:dev: Node.js v18.16.0

แน่นอนว่าฉันเข้าใจชัดเจนว่าทำไมสิ่งนี้ถึงเกิดขึ้น: เห็นได้ชัดว่า @myscope/tspackage ไม่ถูกแปลงโดย tsc-watch ดังนั้นจึงไม่สามารถรันได้ แต่ฉันจะแก้ไขปัญหานี้ได้อย่างไร?

จนถึงตอนนี้ฉันทำให้ฉันสามารถแปลง `@myscope/tspackage` แยกออกมาเป็นอิสระโดยสมบูรณ์ ดูสาขา `tspackage-transpiled` ในรีโพซิทอรีที่ลิงก์ไว้ข้างต้น แต่หลังจากนั้นมันจะน่าเบื่อมากเมื่อฉันทำการเปลี่ยนแปลงใน `@myscope/tspackage` เพราะฉันต้องออกจาก tsc-watch จาก `@myscope/tsapp` ก่อน แปลง `@myscope/tspackage` ใหม่ แล้วจึงเปิด tsc-watch อีกครั้ง

ฉันสังเกตว่า Next.js มีตัวเลือก transpilePackages ซึ่งตรงกับสิ่งที่ฉันต้องการ แต่แน่นอนว่าใช้ได้เฉพาะกับจักรวาล Next.js/frontend เท่านั้น: https://github.com/vercel/turbo/blob/main/examples/basic/apps/web/next.config.js

ตัวเลือกแบบนี้มีอยู่สำหรับ TypeScript มาตรฐานหรือไม่ เพื่อให้ tsc (หรือ tsc-watch) ที่รันจากภายใน @myscope/tsapp สามารถแปลง @myscope/tspackage โดยอัตโนมัติด้วย?

คำตอบ #1

ตอนนี้ฉันกำลังใช้สคริปต์ในแพ็กเกจของฉันซึ่งต้องมีการแปลงรหัสเพื่อเรียก tsc ระหว่างการพัฒนา

// package.json
{
  "main": "dist/index.js",
  "scripts": {
    "dev": "tsc --watch"
  }
}

// tsconfig.json
{
  "include": ["src"],
  "compilerOptions": {
    "preserveWatchOutput": true
  }
}

คงจะดีถ้าสิ่งนี้สามารถใช้ได้ใน turborepo

node.js - แปลงแพ็กเกจ TypeScript จาก workspace อื่นใน Turborepo โดยอัตโนมัติ

คำตอบ #1

บทความที่เกี่ยวข้อง