Visual Studio - שימוש ב-Chutzpah כאשר WebPack מקמפל ts לקובץ js יחיד


יצרתי אפליקציית ווב ברירת מחדל של ASP.NET Core (קובץ -> פרויקט חדש -> Visual C# -> .NET Core) עם תבנית Angular. זוהי תבנית מוכנה לשימוש מידי ב-VS 2017 עם .NET Core 2 ללא שום שינויים מצידי. יש בה כבר קובץ בדיקה של JS בתוך ClientApp/app/components/counter/counter.components.spec.ts, ואני רוצה לגרום ל-Chutzpah לעבוד על הפרויקט הזה.

אני חדש ב-.NET Core וב-Webpack (אבל לא ב-Chutzpah או בבדיקות jasmine, כמובן). כמה שאני מבין, בפרויקט הזה webpack מייצר קובץ js מאוחד ב-./wwwroot/dist/main-client.js מהקבצי typescript, והוא עושה זאת בזמן ריצה, לא בזמן קומפילציה. בכנות, אני מופתע ממה שגורם ל-webpack להופעל בזמן ריצה.

נראה כמו שלכל הדוגמאות הנפוצות והשאלות על שימוש ב-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');
    }));
});