npm - Typescript IDE Auto importerer fra dist, ikke src

Jeg jobber for øyeblikket med et prosjekt som er et Typescript-monorepo.

Mappestrukturen ser omtrent slik ut:

Clients
├- tsconfig.json
└- Packages
   ├- Core
   | ├- tsconfig.json
   | ├-┬ src
   | | └- MyModule.ts
   | └-┬ dist
   |   ├- MyModule.js
   |   └- MyModule.d.ts
   └┬ Web
    ├- tsconfig.json
    └-┬ src
      └- WebComponent.tsx

core/src inneholder modulen min, mens core/dist inneholder bygget mitt.
Når jeg auto-importerer en modul i web/src/WebComponent.tsx, auto-importeres den som @myApp/dist/MyModule i stedet for @myApp/src/MyModule.

Slik ser mine TSConfig-stier ut (i rotmappen):

"baseUrl": "./",
"paths": {
    "@myApp/core/src/*": ["./packages/core/src/*"],
 }

Jeg prøvde også dette:

"baseUrl": "./",
"paths": {
    "@myApp/core/*": ["./packages/core/*"],
}

Dette ser ikke ut til å være et IDE-problem siden vi har folk på teamet som jobber med både VSCode og Webstorm, begge brukergruppene opplever denne feilen.

REDIGER:
Hvis du også opplever dette problemet, har jeg skrevet en midlertidig løsning, men en ordentlig løsning ville vært veldig verdsatt!

Svar #1

Jeg er ikke sikker på om dette vil løse problemet ditt fullstendig, men jeg legger det ut her likevel. Jeg kan bare gjenskape problemet i Webstorm, og ikke i Visual Studio Code. Hvis dette ikke løser problemet ditt, legg igjen en kommentar, så vil jeg undersøke nærmere.

TypeScript-konfigurasjon: tsconfig.json

Du kan prøve å endre dine tsconfig.json-filer for eksplisitt å ekskludere dist-mappen ved å bruke exclude-flagget (på samme JSON-nivå som include), dokumentert under TypeScript sin TSConfig-referansedokumentasjon.

Legge til følgende konfigurasjonsoppføring

   "exclude": ["dist/**/*"]

bør angi at katalogen ikke skal importeres fra i IDEer. Dette ser imidlertid ut til å fungere i Visual Studio Code, men respekteres ikke av Webstorm (omtalt i neste seksjon). Jeg er ikke 100 % sikker på hvorfor Visual Studio Code bestemmer seg for å prøve å importere filer utenfor filer nevnt i includes. Hvis dette ikke fungerer for deg i Visual Studio Code, vil jeg trenge flere detaljer for å kunne lage en reproduksjon.

WebStorm (eller hvilken som helst annen JetBrains IDE)

Det finnes to løsninger:

  • Prosjektspesifikt: På hvilken som helst JetBrains IDE kan du merke en mappe som «utelatt» (f.eks. dist-mappen) ved å åpne kontekstmenyen (høyreklikke, som standard) og klikke Mark Directory as | Excluded.
  • Globalt: Under Fil | Innstillinger | Editor | Filtyper, kan du legge til en ny oppføring under Ignorer filer og mapper for dist.

Merk: Dette vil forhindre IDE-en fra å vise noen "kilder" fra den ekskluderte katalogen (f.eks. dist) som et forslag. Hvis identifikatoren er entydig, vil den importere den korrekt uten ytterligere forespørsel.

Dessverre ser det ut til at dette krever manuell interaksjon fra en utvikler etter å ha initialisert prosjektet - jeg klarte ikke å finne ut om du kunne spesifisere en unntaksregel i et VCS-repositorium og få innstillingene automatisk anvendt når du initialiserer prosjektet i IDE-en.

Svar #2

Løsningen vi endte opp med å komme frem til var å skrive en ESLint-regel som fremhever dist-importen og erstatter den med src ved en eslint --fix-kommando.

Her er det vi gjorde

Struktur:

Clients
├- tsconfig.json
├- .eslintrc.js (UPDATED!)
├- package.json (UPDATED!)
├- eslint (NEW!)
|  ├- index.js (NEW!)
|  └- package.json (NEW!)
└- Packages
   ├- Core
   | ├- tsconfig.json
   | ├-┬ src
   | | └- MyModule.ts
   | └-┬ dist
   |   ├- MyModule.js
   |   └- MyModule.d.ts
   └┬ Web
    ├- tsconfig.json
    └-┬ src
      └- WebComponent.tsx

eslint/package.json:

{
  "name": "eslint-plugin-myApp",
  "version": "1.0.0",
  "main": "index.js"
}

eslint/index.js:
Denne tilpassede regelen analyserer imports og erstatter dist med src hvis det matcher et mønster

module.exports.rules = {
  'no-dist-imports': (context) => ({
    ImportDeclaration: (node) => {
      const path = node.source.raw.toString();
      if (path.includes('@myApp/core/dist')) {
        const fixedImport = node.source.raw.replace('dist', 'src');
        context.report({
          node: node.source,
          message: `Importing from dist`,
          fix(fixer) {
            return fixer.replaceText(node.source, fixedImport);
          },
        });
      }
    },
  }),
};

.eslintrc.js (Lagt til følgende)

module.exports = {
  plugins: [
    'myApp',
  ],
  rules: {
    'myApp/no-dist-imports': 'error',
  },
};

package.json (La til følgende)

{
  "name": "myApp",
  "devDependencies": {
      "eslint-plugin-myApp": "file:./eslint",
  }
}

Det er ikke den perfekte løsningen, men det fungerer for teamet. Hvis noen dist-importer på en eller annen måte kommer forbi IDE-ens lint på lagringsfunksjon, har vi et script som kjører lint før push. Dist-importer kommer ikke lenger inn i våre PR-er.

Hvis det finnes en bedre løsning (som helst fikser importene :P), vennligst gi oss beskjed!

Relaterte artikler