Question

我想导入我的模块，而不是相对模块导入：import { IntHelper } from 'utils/IntHelper';。尽管intellisense在VSCode中运行良好，但已转换的javascript文件会抛出异常：Cannot find module。

我的项目结构：

根

DIST
SRC
- MyProject.ts
- utils的
  - 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文件中抛出无法找到模块异常，即使它在打字稿文件中似乎没问题？当我将'utils/IntHelper'部分悬停在typescript文件的导入行中时，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或节点有关路径配置的信息：

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

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

感谢 eyedean 提供的 mentioning 包裹。

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

4 个答案: