如何排除`node_modules / @ types / ** / node_modules`？

Question

我遇到了一种情况，其中类型定义node_modules/@types正在安装自己的@types依赖项，而这些“嵌套的” @types与我的顶级@types冲突。

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

如何排除node_modules/@types/**/node_modules在tsconfig中？

一个警告-我正在使用awesome-typescript-loader，这可能有一些限制。

我尝试过的

1- exclude属性中的文件glob 排除嵌套的node_modules

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

2- types明确声明

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

3-文件中的glob typeRoots排除嵌套的node_modules

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

我学到了什么

1-排除似乎不适用于@types

2-使用“类型”包含类型意味着包含其依赖的@types

3-typeRoots似乎不适用于文件glob（或者我写的glob错误）

有关：

在已安装的依赖项中排除@types类型

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 - 如何忽略一个特定的目录@类型/不管/ node_modules？

有关我的环境的详细信息

“ node”：“ 8.6.0”，“ typescript：” 2.8.3“，” awesome-typescript-loader“：” 5.0.0“，” webpack“：” 4.8.3“，

Answer 1

node_modules/@types我找到的解决方案是在设置中指定目录tsconfig.json paths。

这是我在 my 中更改的代码片段tsconfig.json，您应该能够根据您的用例进行调整。我需要修改我baseUrl和我的paths设置。

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

就我而言，我在 TS 项目中使用绝对 url，因此我的本地文件都是相对于@/. 我认为如果您不使用这样的绝对网址，您的配置应该类似于以下内容：

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

这是我的完整的tsconfig.json，可能有很多不相关的信息，供参考。

{
  "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"]
}

Answer 2

使用peerDependency确保您只有一个版本的依赖项。

即如果我使用 Angular 和 Angular-Mocks 的类型，Angular-Mocks 将有自己的 @types/Angular

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

@types/angular要防止安装两个版本，请@types/angular在 package.json 文件中声明为peerDependency。