tsconfig 路径不工作

Question

我正在尝试做一些与文档中的 jquery path example 非常相似的事情，但是 TS 一直抛出 TS2307（webpack 编译正常）：

"compilerOptions": {
    "baseUrl": "./src",
    "paths": {
        "@client": [
            "client",
        ],
        "@suir": [
            "../node_modules/semantic-ui-react/dist/commonjs", // not working
        ],
    },
    // …
},
"include": [
    "*.d.ts",
    "client/**/*",
    "../node_modules/semantic-ui-react", // is this necessary?
],

将 baseUrl 更改为 "." 并更新 includes 和 paths 没有任何区别（@client 继续工作并且 @suir 继续不工作）。

将 "@suir" 更改为 "@suir/" 或 "@suir/*"（并将 /* 附加到其值）也没有区别。

我这样做的原因是为了简化我的导入（我明确指定它们而不是从包中提取命名导出以减少我的供应商包大小——节省大约 1 MB）：

import Button from 'semantic-ui-react/dist/commonjs/elements/Button'; // works

import Button from '@suir/elements/Button'; // not found

Answer 1

我不知道为什么这在我第 11 次尝试时有效（但前 10 次没有），但 /* 似乎是秘诀，文档中的示例显然是指向一个特定的文件（并且省略了文件扩展名）。

{
    "compilerOptions": {
        "baseUrl": "./src", // setting a value for baseUrl is required
        "moduleResolution": "node", // was not set before, but is the default
        "paths": {
            "@client/*": [
                "client/*",
            ],
            "@suir/*": [ // notice the `/*` at the end
                "../node_modules/semantic-ui-react/dist/commonjs/*", // notice the `/*`
            ],
        },
        // …
    },
    "include": [
        "./src/client/**/*",
    ],
}

Answer 2

这可能对某人有所帮助 - 如果您使用 tsc 或工具将您的 TS 代码编译到单独的文件夹，例如 dist，tsconfig-paths 注册 NOT 解决问题。我有一个 tsconfig.json 这样的：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "lib": ["dom", "esnext"],
        "baseUrl": ".",
        "jsx": "react",
        "removeComments": true,
        "sourceMap": true,
        "outDir": "dist"
        "rootDir": ".",
        "paths": {
            "shared/*": ["./shared/*"],
        }
    },
    "include": ["./client/**/*", "./server/**/*"]
}

您可以看到 shared/someFolder/someScript 之类的路径将正确解析到我项目中的 shared 文件夹，这比许多相对 ../../../../ 路径的负载更干净。

但是，这给我带来了错误：

➜  game git:(game-dev) ✗ node --inspect -r tsconfig-paths/register dist/server/runProd.js
Debugger listening on ws://127.0.0.1:9229/f69956aa-d8d6-4f39-8be1-9c3e8383d4be
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
internal/modules/cjs/loader.js:584
    throw err;
    ^

Error: Cannot find module 'shared/types/UserTypes'

我做了一些挖掘，发现 tsconfig-paths 生成的 tryPaths 数组具有相对于 project/cwd 基础的绝对 URL，而不是构建 dist文件夹。

回想起来这似乎很明显。似乎没有明显的方法来处理这个库，所以我通过将 tsconfig.json 复制到 dist 文件夹和运行 node -r tsconfig-paths/register main.js 来解决这个问题。

Answer 3

即使设置了基础 url 检查它是否在默认值“./”上然后应该改为“src”，只有这样对我有用。

Answer 4

正如 Emily Zhai 在评论中提到的，这有时可能只需要重新启动语言服务器。

在 VSCode 中，您可以按 Cmd/Ctrl + Shift + P 并搜索 Typescript: Restart TS Server。

重新启动后，一切都开始为我工作了。

Answer 5

如果您将 Webpack 与 ts-loader 一起使用，但在尝试上述所有答案后仍然无法正常工作，您可能需要在 [=10= 的解析部分使用插件] 配置文件 - tsconfig-paths-webpack-plugin;所以它遵循你在编译时输入 tsconfig.json 文件的路径。

来源 - https://github.com/TypeStrong/ts-loader#baseurl--paths-module-resolution

Answer 6

就像 pkestikar 说的那样，tsconfig-paths-webpack-plugin 可以提供帮助。用yarn add --dev tsconfig-paths-webpack-plugin 保存在devDependencies上，在next.config.js

上添加如下配置

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  resolve: {
    plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })]
  }
}

我的路径开始适用于此。这是我的 tsconfig.json

"compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"]
    },
}

这里是一个组件的导入。

import { Button } from '@/components/Button/Button'

它也适用于 import { Button } from 'components/Button/Button'。

Answer 7

我也曾因 .tsconfig 无法识别我的别名而苦苦挣扎（而在另一个应该具有保存配置的项目中它运行得很好）。

事实证明，这是一个菜鸟错误：我将 paths 属性放在 JSON 对象的末尾，但它必须是嵌套的属性 compilerOptions 部分：

// This does't work ❌
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
     //...
    "baseUrl": ".",
  },
  "include": ["next-env.d.ts", "twin.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
  "paths": {
      "@components/*": ["components/*"],
      "@lib/*": ["lib/*"]
    }
}

// This should work ✅
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
     //...
    "baseUrl": ".",
    "paths": {
      "@components/*": ["components/*"],
      "@lib/*": ["lib/*"]
    }
  },
  "include": ["next-env.d.ts", "twin.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"],
}

Answer 8

开箱即用，它不适用于 tsc 或 ts-node。但是对于一些包（tsc-alias & module-alias），它是有效的。不需要 babel 或 webpack 设置。

// tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "@common/*": ["common/*"],
      "@services/*": ["services/*"],
    },
    ...
  },
}

使用 TSC

添加 tsc-alias (https://www.npmjs.com/package/tsc-alias) 作为开发依赖

yarn add --dev tsc-alias

并将其添加到您的构建命令中

"build": "tsc && tsc-alias",

使用 TS-NODE

添加模块别名 (https://www.npmjs.com/package/module-alias) 依赖项

yarn add module-alias

创建引用所有别名的文件

// src/paths.ts

import 'module-alias/register';
import { addAliases } from 'module-alias';

addAliases({
  '@common': `${__dirname}/common`,
  '@services': `${__dirname}/services`,
});

并将其作为第一个导入导入到您的入口脚本中

// src/server.ts

import './paths';
import express, { Request, Response, NextFunction } from 'express';
...

const app = express();
...
app.listen(port, onListen(port));

Answer 9

我不得不使用 babel 来编译代码

npm i -D @babel/cli @babel/core @babel/node @babel/preset-env @babel/preset-typescript babel-plugin-module-resolver

然后在构建命令上

"build": "babel src --extensions \".js,.ts\" --out-dir dist --copy-files --no-copy-ignored"

还有 babel.config.js

module.exports = {
presets: [
    [
        '@babel/preset-env',
        {
            targets: {
                node: 'current'
            }
        }
    ],
    '@babel/preset-typescript'
],
plugins: [
    ['module-resolver', {
        alias: {
            '@config': './src/config',
            '@modules': './src/modules',
            '@shared': './src/shared'
        }
    }]
],
ignore: [
    '**/*.spec.ts'
]

}

Answer 10

如果有人在完成上述所有操作后仍然遇到此问题。尝试关闭 VS 代码并再次重新打开，环顾四周 2 小时后对我有用..

Answer 11

对于我自己来说，经过反复试验，解决方案很简单。从我的 tsconfig 中删除这一行，它起作用了。

"extends": [
    "plugin:import/recommended",
]

和

"rules": {
    "import/no-unresolved": "error",,
}

Answer 12

在我的例子中，问题是我添加了错误文件的路径。如果您正在处理一个您不确定其配置的大项目，那么配置文件很可能会被其他文件扩展。在我的项目中有另一个名为 tsconfig.app.json 的文件，请注意第一行的扩展属性：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*",
      ],
      "@app/*": ["app/*"]
    }
}

Answer 13

经过反复试验，我了解到，它的工作原理与我们想象的不同。

//tsconfig.json
"baseUrl": ".",
"paths": {
  "@components/": ["src/components/"],
}

//SomeCompomonent.tsx
import { Button } from "@components/" // will work
import Button from "@components/Button" // will not work

要使第二个导入行工作，您需要输入 *

//tsconfig.json
"baseUrl": ".",
"paths": {
  "@components/*": ["src/components/*"],
}

//SomeCompomonent.tsx
import { Button } from "@components/" // will not work
import Button from "@components/Button" // will work

让两者都发挥作用

//tsconfig.json
"baseUrl": ".",
"paths": {
  "@components/": ["src/components/"],
  "@components/*": ["src/components/*"],
}

//SomeCompomonent.tsx
import { Button } from "@components/" // will work
import Button from "@components/Button" // will work

tsconfig 路径不工作

tsconfig paths not working

typescript

alias

tsconfig

typescript2.9

使用 TSC

使用 TS-NODE