reactjs - Hvordan feilsøke et TypeScript-bibliotek ved hjelp av Chrome Dev Tools?


Jeg har opprettet et TypeScript-bibliotek som har blitt publisert til npm ved å bruke følgende struktur:

mobx-state-router
|--- package.json
|--- src
|    `--- index.ts     (TypeScript source)
`--- dist
     |--- index.js     (compiled JavaScript)
     |--- index.js.map (sourcemap)
     `--- index.d.ts   (type definitions)

Jeg bruker deretter dette biblioteket i en React-app ved å legge til en avhengighet til det. Når jeg feilsøker React-appen min i Chrome Dev Tools, ønsker jeg å legge til brytepunkter i biblioteket mitt. Imidlertid viser Chrome Dev Tools meg den kompilert versjonen av koden i stedet for den originale TypeScript-koden. Jeg håpet at ved å inkludere TypeScript-kilden og sourcemap i pakken min, ville Chrome Dev Tools kunne vise TypeScript-filen min.

  1. Er det mulig å pakke en TypeScript-bibliotek på en måte som det kan feilsøkes i en avhengig nettapp?
  2. Hvis ikke, bør jeg da ikke bry meg om å pakke kildekoden og sourcemap-en i pakken min, og dermed redusere størrelsen på bunten? Hva er beste praksis rundt dette?

Relaterte artikler