如何配置 typescript 以使用 webpack 的 resolve.modules答案

【问题标题】：How to configure typescript to work with webpack's resolve.modules如何配置 typescript 以使用 webpack 的 resolve.modules
【发布时间】：2019-04-01 14:35:30
【问题描述】：

说，我有一个这样的 webpack 配置：

resolve: {
  extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
  modules: ['my_modules', 'node_modules'],
},

所以我有一个特殊的目录名称my_modules，其工作方式与node_modules 目录类似。我发现的关于让 typescript 与 webpack 的 resolve.modules 配置一起使用的所有其他示例和问题都是针对绝对路径的，没有一个是针对像我这样的目录名称的。

那么有什么方法可以让 typescript 理解上面 webpack 的 resolve.modules 配置中的模块分辨率呢？（具有与node_modules 类似的另一个目录名称）

【问题讨论】：

标签： typescript webpack module node-modules

【解决方案1】：

看起来baseUrl 中的baseUrl 和paths 的组合可以帮助你，看看（非常有用的）documentation here。

他们提供了一个与您的案例非常相似的示例：

使用“路径”还可以实现更复杂的映射，包括多个后备位置。考虑一个项目配置，其中只有一些模块在一个位置可用，其余模块在另一个位置。构建步骤会将它们放在一个地方。项目布局可能如下所示：

projectRoot
├── folder1
│   ├── file1.ts (imports 'folder1/file2' and 'folder2/file3')
│   └── file2.ts
├── generated
│   ├── folder1
│   └── folder2
│       └── file3.ts
└── tsconfig.json

相应的 tsconfig.json 如下所示：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "*",
        "generated/*"
      ]
    }
  }
}

这告诉编译器对于匹配模式“*”（即所有值）的任何模块导入，在两个位置查找：baseUrl 和 generated/

import ‘folder2/file3’

    - pattern ‘*’ is matched and wildcard captures the whole module name
    - try first substitution in the list: ‘*’ -> folder2/file3
    - result of substitution is non-relative name - combine it with baseUrl -> projectRoot/folder2/file3.ts.
    - File does not exist, move to the second substitution
    - second substitution ‘generated/*’ -> generated/folder2/file3
    - result of substitution is non-relative name - combine it with baseUrl -> projectRoot/generated/folder2/file3.ts.
    - File exists. Done

在这种情况下，您可以使用 my_modules 代替 generated/*：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "my_modules/*"
        "*",
      ]
    }
  }
}

【讨论】：