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

Visual Studio - ใช้ Chutzpah เมื่อ WebPack คอมไพล์ ts เป็นไฟล์ js เดียว


ฉันได้สร้างแอปพลิเคชันเว็บ ASP.NET Core เริ่มต้น (File -> New Project -> Visual C# -> .NET Core) โดยใช้เทมเพลต Angular นี่เป็นเทมเพลตที่ใช้ได้ทันที 100% ใน VS 2017 กับ .NET Core 2 โดยที่ฉันไม่ได้ทำการเปลี่ยนแปลงใด ๆ มันมีไฟล์ทดสอบ JS หนึ่งไฟล์อยู่แล้วใน ClientApp/app/components/counter/counter.components.spec.ts และฉันต้องการให้ Chutzpah ทำงานบนโปรเจ็กต์นี้

ฉันเป็นมือใหม่กับ .NET Core และ Webpack (แต่ไม่ใช่กับ Chutzpah หรือ jasmine tests นะ) จากที่ฉันพอจะเห็น ในโปรเจกต์นี้ webpack จะสร้างไฟล์ js แบบรวมที่ ./wwwroot/dist/main-client.js จากไฟล์ typescript และมันทำงานในช่วง runtime ไม่ใช่ช่วง compile-time ต้องบอกตามตรงว่าฉันงงมากว่าทำไม webpack ถึงเริ่มทำงานในช่วง runtime

ดูเหมือนว่าตัวอย่างและคำถามทั่วไปเกี่ยวกับการใช้ Chutzpah เกือบทั้งหมดเกี่ยวข้องกับโครงการที่แต่ละไฟล์ .ts มีไฟล์ .js ที่คอมไพล์แล้วตรงกันในโฟลเดอร์เดียวกัน แต่โครงการเริ่มต้นนี้ไม่ได้ทำเช่นนั้น; มันคอมไพล์ TS เป็น JS ขณะรันไทม์และรวมทั้งหมดในขั้นตอนเดียวอย่างราบรื่น ฉันชอบการตั้งค่านี้และไม่อยากต้องละทิ้งมัน; มันสะอาดมาก

แต่สำหรับชีวิตของฉัน ฉันก็ไม่สามารถแม้แต่จะ เดา ได้ว่าต้องเขียนไฟล์คอนฟิก chutzpah.json อย่างไรที่จะทำงานได้ในสถานการณ์นี้ ฉันควรเริ่มจากตรงไหน? ฉันได้ดูตัวอย่างการคอมไพล์จากโปรเจกต์ chutzpah แล้วและมีความแตกต่างมากมายระหว่างคอนฟิกเริ่มต้นนี้กับสิ่งที่ตัวอย่างกำลังทำอยู่ ทำให้ฉันไม่รู้ว่าจะก้าวไปข้างหน้าอย่างไร

สำหรับการอ้างอิง เนื้อหาของไฟล์ทดสอบ component.spec.ts มีดังด้านล่าง

/// <reference path="../../../../node_modules/@types/jasmine/index.d.ts" />
import { assert } from 'chai';
import { CounterComponent } from './counter.component';
import { TestBed, async, ComponentFixture } from '@angular/core/testing';

let fixture: ComponentFixture<CounterComponent>;

describe('Counter component', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({ declarations: [CounterComponent] });
        fixture = TestBed.createComponent(CounterComponent);
        fixture.detectChanges();
    });

    it('should display a title', async(() => {
        const titleText = fixture.nativeElement.querySelector('h1').textContent;
        expect(titleText).toEqual('Counter');
    }));

    it('should start with count 0, then increments by 1 when clicked', async(() => {
        const countElement = fixture.nativeElement.querySelector('strong');
        expect(countElement.textContent).toEqual('0');

        const incrementButton = fixture.nativeElement.querySelector('button');
        incrementButton.click();
        fixture.detectChanges();
        expect(countElement.textContent).toEqual('1');
    }));
});