javascript - Typescript sourcemaps โดยใช้ Babel ผ่านบรรทัดคำสั่ง

ฉันกำลังพยายามทำให้ Babel สร้าง sourcemaps เมื่อรันจาก command line เอกสารของ Babel เกี่ยวกับ sourcemaps ดูเหมือนว่าจะเน้นไปที่ workflow ของ gulp มากกว่า และฉันไม่แน่ใจว่าสิ่งนั้นแปลเป็น command line ได้อย่างไร

ฉันกำลังคอมไพล์ไทป์สคริปต์ของฉันโดยใช้

tsc -p ./src

ไฟล์ tsconfig.json ของฉัน:

{
    "compilerOptions": {
        "module": "amd",
        "noImplicitAny": true,
        "removeComments": false,
        "preserveConstEnums": true,
        "out": "wwwroot/app.js",
        "sourceMap": true,
        "target": "ES6"
    },
    "files": [
        "App.ts"
    ]
}

สิ่งนี้สร้าง wwwroot/app.js และ wwwroot/app.js.map

ฉันจึงรัน Babel กับไฟล์ app.js:

babel ./wwwroot/app.js -o ./wwwroot/app.js --presets es2015 --compact false --inputSourceMap ./wwwroot/app.js.map --sourceMaps both

นี่จะปรับปรุง app.js แต่ปล่อยให้ app.js.map อยู่ในสภาพเดิม ซึ่งหมายความว่าสองไฟล์นี้จะไม่ตรงกันอีกต่อไป

ฉันจะทำอย่างไรให้ขั้นตอนของ Babel สร้าง sourcemap ใหม่ที่แมปไฟล์ app.js สุดท้ายของฉันกลับไปยังซอร์สไฟล์ TypeScript ของฉัน?

คำตอบ #1

นี่คือวิธีที่ฉันทำให้มันใช้งานได้ ในไฟล์ tsconfig.json ของคุณคุณจะต้องมีตัวเลือกดังต่อไปนี้:

{
  "compilerOptions": {
    "inlineSourceMap": true,
    "inlineSources": true
  }
}

จากนั้นเมื่อคุณเรียกใช้ babel-cli คุณจะต้องส่ง --source-maps inline นี่คือตัวอย่างสคริปต์ npm ที่สมมติว่า tsc ส่งผลลัพธ์ไปยังไดเรกทอรี build และว่า babel จะส่งผลลัพธ์ไปยังไดเรกทอรีเดียวกัน:

tsc && babel build -d build --source-maps inline

คำตอบ #2

ฉันกำลังมองหาสิ่งที่เหมือนกันนี้พอดีและเจอสิ่งนี้: https://phabricator.babeljs.io/T6911

โดยพื้นฐานแล้ว แม้ว่าตัวเลือกขั้นสูงสามารถใช้งานกับ babel --name=value ได้เช่นกัน การระบุชื่อไฟล์สำหรับ inputSourceMap ไม่ได้รับการสนับสนุนจาก CLI และสามารถใช้งานได้เฉพาะเมื่อใช้โค้ดเท่านั้น

การใช้ Gulp sourcemaps กับ TypeScript และ Babel อาจมีประโยชน์ต่อคุณ ฉันสามารถทำให้มันสร้าง sourcemaps ที่อ้างอิงไปยังทั้งไฟล์ JS และไฟล์ TS ดั้งเดิม ซึ่งดูเหมือนว่าจะมีแนวโน้มดี อย่างไรก็ตาม (ตามที่กล่าวในความคิดเห็นของคำตอบนั้น) ฉันก็ไม่สามารถทำให้มันใช้ sourceRoot ที่ถูกต้องได้เช่นกัน ดังนั้นไฟล์ .js.map จึงชี้ไปยังตำแหน่งแหล่งที่มา ซึ่งจริงๆ แล้วไม่มีอยู่

ไม่ค่อยน่าพอใจ :-(