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

Posted 2023-03-13

【中文标题】如何排除`node_modules/@types/**/node_modules`？

【英文标题】：How to exclude `node_modules/@types/**/node_modules`?

【发布时间】：2018-11-04 22:27:33

【问题描述】：

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

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

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

一个警告 - 我正在使用 awesome-typescript-loader，may have some limitations。

我的尝试：

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

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

2 - 明确声明 types

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

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

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

我学到了什么

1 - exclude 似乎不适用于@types

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

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

相关：

Exclude @types typings in installed dependencies

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 - How to ignore @types/whatever/node_modules for a specific directory?

我的环境详情

“节点”：“8.6.0”， “打字稿：“2.8.3”， “真棒打字稿加载器”：“5.0.0”， "webpack": "4.8.3",

【问题讨论】：

您是否尝试过将您的版本更新到 1.6？

@TimBJames ????还没有尝试升级，虽然我希望我能！这是一个庞大的 AngularJS 应用程序，它在某些部分仍然使用ngController。我希望有一个我现在可以实施的解决方案，无需与队友协调并进行广泛的回归测试。

我在 package.json 中破解了一个解决方案，但我仍然想知道如何避免冲突的依赖关系。 ` "postinstall": "node rimraf.js node_modules/@types/angular-ui-bootstrap/node_modules"`

我认为由于依赖版本不同，这个问题不容易解决。看起来angular-ui-bootstrap 总是想要更高版本的类型。

【参考方案1】：

在您的 package.json 中使用以下 postinstall 脚本：

for d in node_modules/@types/*/ ; do
  rm -rf $dnode_modules
done

这将遍历@types 并删除不需要的传递类型依赖项。

【参考方案2】：

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

这是我在tsconfig.json 中更改的 sn-p，您应该可以根据自己的用例进行调整。我需要修改我的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"]

【参考方案3】：

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

即如果我使用 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，请在您的 package.json 文件中将 @types/angular 声明为 peerDependency。