angularjs - Hur utesluter man `node_modules/@types/**/node_modules`?

Jag har stött på en situation där en typdefinition i node_modules/@types installerar sina egna @types-beroenden, och dessa "nästlade" @types konflikterar med mina toppnivå @types.

@types
|-angular //v1.5
|-angular-ui-bootstrap
  |-node_modules
    |-@types
       |-angular //v1.6

Hur kan jag exkludera node_modules/@types/**/node_modules i min tsconfig?

Ett förbehåll - jag använder awesome-typescript-loader, vilket kan ha vissa begränsningar.

Vad jag har försökt:

1 - filmönster i exclude-egenskapen för att utesluta de nästlade node_modules

    compilerOptions.exclude: '../node_modules/@types/**/node_modules'

2 - deklarera types uttryckligen

    compilerOptions.types: ['angular', 'angular-ui-bootstrap']

3 - fil glob i typeRoots för att exkludera inbäddade node_modules

    compilerOptions.typeRoots: ['../node_modules/@types/**/!(node_modules)']

Vad jag har lärt mig

1 - exclude verkar inte fungera med @types

2 - att inkludera en typ med "typer" innebär att inkludera dess beroende @typer

3 - typeRoots verkar inte fungera med fil-globs (eller så skriver jag globen fel)

Relaterat:

Exkludera @types-typningar i installerade beroenden

https://github.com/Microsoft/TypeScript/issues/9731

https://github.com/Microsoft/TypeScript/issues/11917

https://github.com/s-panferov/awesome-typescript-loader/issues/492

tsconfig - Hur man ignorerar @types/whatever/node_modules för en specifik katalog?

Detaljer om min miljö

"node": "8.6.0", "typescript": "2.8.3", "awesome-typescript-loader": "5.0.0", "webpack": "4.8.3",

Svar #1

En lösning jag hittade för detta var att specificera node_modules/@types-katalogen i tsconfig.json paths-inställningen.

Här är utdraget jag ändrade i min tsconfig.json, som du bör kunna anpassa för ditt användningsfall. Jag behövde ändra mina baseUrl och paths inställningar.

   ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "*": ["./node_modules/@types/*"]
    }
   ...

I mitt fall använder jag absoluta URL:er i mitt TS-projekt, så mina lokala filer är alla relativa till @/. Jag tror att om du inte använder en sådan absolut URL bör du ha något liknande följande för din konfiguration:

   ...
    "baseUrl": ".",
    "paths": {
      "*": ["./src/*", "./node_modules/@types/*"]
    }
   ...

Här är min kompletta tsconfig.json, som förmodligen innehåller mycket irrelevant information, för referens.

{
  "compilerOptions": {
    "outDir": "./build/",
    "sourceMap": true,
    "allowJs": true,
    "checkJs": true,
    "jsx": "react",
    "target": "es2017",
    "module": "commonjs",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "*": ["./node_modules/@types/*"]
    }
  },
  "include": ["**/*", "*"],
  "exclude": ["build", "node_modules", "coverage"]
}

Svar #2

Använd peerDependencies för att säkerställa att du endast har en version av ett beroende.

d.v.s. Om jag använder typings för angular och angular-mocks, kommer angular-mocks att ha sina egna @types/angular

@types/angular  // => 1.5.8
@types/angular-mocks // => 1.5.8
@types/angular-mocks/node_modules/@types/angular // => *

För att förhindra att två versioner av @types/angular installeras, ange @types/angular som en peerDependency i din package.json-fil.

Relaterade artiklar