preprocessor - Vytvoriť mapu zdrojov z transformácie API TypeScriptu

Používam TypeScript API na vytvorenie vlastného predprocesora súborov syntaxe, presne tak ako to robia Svelte a Vue.

Takže, vložím svoj vlastný súbor s vlastnou syntaxou a použijem funkciu ts.transform na prechádzanie AST stromu a zmenu toho, čo potrebujem zmeniť.

Ale čo som v dokumentácii TS nenašiel, je, ako môžem generovať source mapy z môjho vstupného textu súboru na výstupný výsledný text.

const sourceFile = ts.createSourceFile(
  "index.ts",
  fileContent, // file input string
  ts.ScriptTarget.ESNext,
  false,
  ts.ScriptKind.TSX
);
const result = ts.transform(sourceFile, [transformer]); // my custom transformer function
const resultStr = printer.printFile(result.transformed[0]); // the output file string
// how to get sourcemaps for "resultStr"?

Odpoveď č. 1

Na toto som narazil včera, keďže som mal rovnaký problém pri používaní ts.transform. Tak som zistil, ako ts-jest dokázal generovať to isté pri spúšťaní v isolatedModules.

Po preskúmaní kódu ts-jest sme zistili, že ak použijeme ts.transpileModule namiesto ts.transform, výsledný výstup obsahuje aj mapu zdrojov.

Tu je to, čo som použil, čo tiež vrátil zdrojové mapy (s TS 4.7.x), -

const transformedOutput = ts.transpileModule(sourceText, {
    fileName: sourcePath,
    transformers: {
        before: [transformer]
    },
    compilerOptions: {
        target: ts.ScriptTarget.ES2015,
        module: ts.ModuleKind.ESNext,
        isolatedModules: true,
        sourceMap: true
    }
});
console.log('Transformed Code - \n', transformedOutput .outputText);
console.log('Transformed sourcemap - \n', transformedOutput .sourceMapText);

Tu je odkaz na kódovú základňu ts-jest s týmto použitím - https://github.com/kulshekhar/ts-jest/blob/main/src/legacy/compiler/ts-compiler.ts#L256

Odpoveď č. 2

Vzdal som sa TypeScriptu a začal som používať balík magic-string, ktorý pre vás vytvára skvelú mapu zdrojov bez starostí.

https://github.com/Rich-Harris/magic-string