Question

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

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

因此，我有一个特殊的目录名称my_modules，其作用与node_modules目录类似。我发现的有关使typescript与webpack的resolve.modules配置一起使用的所有其他示例和问题，都是用于绝对路径的，而没有一个目录名称是针对我的情况的。

那么，有什么方法可以使打字稿理解上面webpack的resolve.modules配置中的模块分辨率？（具有另一个类似于node_modules的目录名称）

Answer 1

baseUrl中paths和tsconfig.json的组合似乎可以为您提供帮助，看看{非常有用的信息} 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

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

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

如何配置打字稿以使用Webpack的resolve.modules

1 个答案: