打字稿模块分辨率不起作用答案

【问题标题】：Typescript module resolution not working打字稿模块分辨率不起作用
【发布时间】：2017-11-09 20:20:28
【问题描述】：

我想像这样导入我的模块，而不是相对模块导入：import { IntHelper } from 'utils/IntHelper';。即使智能感知在 VSCode 中运行良好，转译的 javascript 文件也会引发异常：Cannot find module。

我的项目结构：

根

分布
源
- MyProject.ts
- 实用程序
  - IntHelper.ts
tsconfig.json

文件：MyProject.ts

import { IntHelper } from 'utils/IntHelper';

文件：IntHelper.ts

export module IntHelper {
  export const xy: string = 'Test';
  export function crossSum(int: number) {
    return int; // Nonsense - ofcourse.
  }
}

Tsconfig.json：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
        "*": [
            "*",
            "src/*"
        ]
    }
  }
}

我的问题：

为什么它会在 javascript 文件中抛出找不到模块异常，即使它在 typescript 文件中看起来很好？当我将'utils/IntHelper' 部分悬停在打字稿文件的导入行中时，VSCode 也会显示该模块的正确路径。

【问题讨论】：

你的建造者是什么？ webpack，fusebox，还是直接使用tsc？
您可以向 typescript 编译器提供 --traceResolution 以查看您的模块未解析的原因。如果它被编译器解决，您的问题可能来自您的构建解决方案。
见typescriptlang.org/docs/handbook/…
试试import { IntHelper } from './utils/IntHelper';
在这里查看答案：stackoverflow.com/questions/42197563/…

标签： typescript tsconfig

【解决方案1】：

你和其他许多人一样有同样的问题，相信 TypeScript 编译器会将解析的路径保存到 JS 文件。事实并非如此。你需要自己解决这个问题，或者通过使用工具，WebPack 通常是人们建议的（然而，WebPack 是一个怪物），请看这个答案：

Typescript2 path module resolution

这很可能也能解决您的问题！

【讨论】：

【解决方案2】：

当然，在您的情况下，节点会对模块感到困惑，因为它希望所有非相对路径都存在于 node_modules 中。使用 typescript 的好的解决方案是使用 tsconfig 的 paths 部分，如下所示：

{
  "compilerOptions": {
    "paths": {
        "@utils": [
            "src/utils/*"
        ]
    }
  }
}

现在我们可以

import { IntHelper } from '@utils/IntHelper';

但我们仍然需要通知 webpack 或 node 关于 out path 的配置：

// for node:
--require tsconfig-paths/register

// for webpack
const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;


      resolve: {
        plugins: [
          new TsConfigPathsPlugin(),
        ]
      },

【讨论】：

【解决方案3】：

我遇到了类似的问题。为我解决的问题还必须在 webpack.config.js 文件中定义别名。

resolve: {
    alias : {
        alias: {
            "@components": path.resolve(__dirname, "../src/components/"),
            "@constants": path.resolve(__dirname, "../src/constants/"),
            ....
        }
    }
}

【讨论】：

【解决方案4】：

扩展以上 Patrick_Forseberg 的answer。

没有像issue 中提到的那样解决这个问题的官方方法，但是有一个（非常）流行的名为tsconfig-paths 的第 3 方 npm 包可以完美地解决我的问题。

感谢eyedean 提供mentioning 软件包。

【讨论】：

【解决方案5】：

确保在ts-config.json内部

{
"compilerOptions": {
...
    "baseUrl" : "***this path must point to your project directory***"
....
}

注意：我目前在节点 v14.16.0 和打字稿 4.4.2

【讨论】：