ค้นหาเว็บไซต์

ลำดับเอาต์พุตของ TypeScript - Gulp ที่เทียบเท่ากับ tsc พร้อม tsconfig.json


เมื่อมีไฟล์ tsconfig และใช้คำสั่ง tsc ผ่าน command-line ทุกอย่างทำงานตามที่ควรจะเป็น อย่างไรก็ตาม การใช้ gulp-typescript กับ tsconfig.json และการระบุ outFile จะสร้างลำดับเอาต์พุตที่ต่างออกไป ปัญหาของฉันคือฉันไม่สามารถหาวิธีใน gulp ที่จะสร้าง JavaScript แบบเดียวกับที่ tsc ทำได้

เวิร์กโฟลว์การสร้างของเราขึ้นอยู่กับ gulp; แต่ tsc เป็นมาตรฐานทองคำ มีฟีเจอร์ watch ที่ดี และมีการสนับสนุนเครื่องมืออย่างกว้างขวาง (เช่น http://dev.ivogabe.com/using-vscode-with-gulp-typescript/) จะดีมากถ้าฉันสามารถทำให้การสร้างที่ใช้ gulp ของเราทำงานเหมือนกับ tsc ได้

ตัวอย่าง tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "preserveConstEnums": true,
    "outFile": "out/out.js",
    "sourceMap": true,
    "target": "es5",
    "noEmitOnError": true
  },
  "exclude": [
    "node_modules",
    "out"
  ]
}

ตัวอย่าง gulpfile.js:

"use strict";
var gulp = require('gulp');
var typescript = require('gulp-typescript');

var tsProject = typescript.createProject('tsconfig.json');

gulp.task('typescript:compile', function () {
    var tsResult = tsProject.src()
        .pipe(typescript(tsProject));

    return tsResult.js.pipe(gulp.dest('out'));
});
gulp.task('default', ['typescript:compile']);

อีกครั้ง ปัญหาของฉันคือ tsc กับ tsconfig.json ข้างต้น; และ gulp กับ gulpfile.js และ tsconfig.json ข้างต้น (โดยใช้ gulp-typescript) ผลิตลำดับเอาต์พุตที่แตกต่างกันสำหรับไดเรกทอรีไทป์สคริปต์ที่ไม่ซับซ้อน นักพัฒนาควรสามารถสลับระหว่างกระบวนการสร้างทั้งสองได้อย่างอิสระและมั่นใจว่าพวกเขาไม่ได้พลาดข้อบกพร่องของลำดับเอาต์พุต

ฉันไม่เข้าใจความแตกต่างระหว่างกฎการจัดลำดับผลลัพธ์ที่ใช้สำหรับ tsc และ gulp-typescript ดังนั้นฉันจึงยังไม่ได้สร้างกรณีทดสอบง่าย ๆ สำหรับปัญหานี้ แต่ในอุดมคติ gulp-typescript เมื่อใช้โครงการ tsconfig ควรใช้การจัดลำดับเดียวกับ tsc

ฉันสามารถแก้ปัญหานี้โดยใช้ "child-process".exec เพื่อเรียก tsc แต่ gulp-typescript มีการรวมกับ gulp ที่ดีกว่า; ฉันก็เปิดรับการใช้ปลั๊กอิน gulp อื่น ๆ ที่เรียกตัวคอมไพเลอร์ของ TypeScript โดยตรง (และใช้ไฟล์โปรเจกต์ tsconfig.json) แต่ฉันยังหาเจอไม่พบ

คำตอบ #1

ปัญหาของฉันคือฉันหาแนวทางของ gulp ในการสร้าง JavaScript เหมือนที่ tsc ทำไม่ได้

TypeScript มีการนำไปใช้งานภายในของการจัดลำดับที่ทำได้โดย:

  • ลำดับของไฟล์ที่ส่งผ่านในบรรทัดคำสั่ง หากคุณใช้ tsconfig สิ่งนี้ไม่เกี่ยวข้อง
  • ลำดับที่ไฟล์ถูกตรวจพบ เนื่องจากคุณกำลังใช้ tsconfig มันจะเริ่มจากไฟล์แรกก่อน จากนั้นจะจัดลำดับไฟล์อื่น ๆ ตาม references และ import

หมายเหตุ: นี่ ไม่ ใช้ได้กับผู้ใช้ API (เช่น gulp) นอกจากนี้สิ่งนี้ยังสามารถทำให้เกิดปัญหาแม้กระทั่งกับ tsc : https://github.com/TypeStrong/atom-typescript/blob/master/docs/out.md

ดังนั้นจึงใช้โมดูลภายนอก: https://basarat.gitbooks.io/typescript/content/docs/project/modules.html

และนี่คือตัวเริ่มต้นอย่างรวดเร็ว: https://basarat.gitbooks.io/typescript/content/docs/quick/browser.html

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