打字稿模块解析不起作用

Question

而不是相对模块导入，我想像这样导入我的模块：import { IntHelper } from 'utils/IntHelper'; .尽管智能感知在VSCode中工作正常，但转译的javascript文件会抛出异常：Cannot find module。

我的项目结构：

根

• 区
• 来源
  • 我的项目.ts
  • 实用工具
    • IntHelper.ts
• tsconfig.json

文件： 我的项目.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 文件中抛出找不到模块异常，即使它在打字稿文件中看起来很好？当我将'utils/IntHelper'部分悬停在打字稿文件的导入行中时，VSCode 也会显示该模块的正确路径。

Answer 1

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

打字稿2

路径模块解析

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

Answer 2

当然，

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

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

现在我们可以

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

但是我们仍然必须通知 webpack 或节点有关输出路径配置的信息：

// for node:
--require tsconfig-paths/register
// for webpack
const TsConfigPathsPlugin = require('awesome-typescript-loader').TsConfigPathsPlugin;

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

Answer 3

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

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

Answer 4

扩展Patrick_Forseberg上面的答案。

没有

解决此问题的官方方法，如此问题所述，但是有一个(非常(流行的第三方npm软件包称为tsconfig-paths可以完美地解决了我的问题。

非常感谢 eyedean 提到这个包裹。

Answer 5

确保在ts-config.json里面

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

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