Typescript 模块解析不起作用

Question

我想像这样导入我的模块，而不是相关模块导入：import { IntHelper } from 'utils/IntHelper';。尽管 intellisense 在 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 文件中抛出 cannot find module 异常，即使它在打字稿文件中看起来没问题？当我将 'utils/IntHelper' 部分悬停在打字稿文件 VSCode 的导入行中时，也会显示该模块的正确路径。

Answer 1

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

Typescript2 path module resolution

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

Answer 2

当然，在您的情况下，节点会对模块感到困惑，因为它希望所有非相对路径都出现在 node_modules 中。打字稿的好解决方案是像这样使用 tsconfig 的 paths 部分：

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

现在我们可以

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

但我们仍然需要通知 webpack 或 node out 路径配置：

// 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 上面的。

issue 中没有正式的解决方法，但是有一个（非常）流行的第三方 npm 包 tsconfig-paths 完美地解决了我的问题。

多亏了eyedean for mentioning这个包。

Answer 5

确保里面ts-config.json

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

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

Typescript 模块解析不起作用

Typescript module resolution not working

typescript

tsconfig