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

我不知道为什么这是我第十一次尝试（但不是前 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

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

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

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

Answer 3

这可能对某人有所帮助 - 如果您使用 tsc 或工具将您的 TS 代码编译到单独的文件夹中，例如 dist、tsconfig-paths 注册，不可以解决问题。我有一个这样的 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 4

我也曾为.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 5

开箱即用，它不适用于 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

添加module-alias（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 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

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

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

Answer 8

即使设置了基本 url，也要检查它是否在默认值“./”上 那么应该改为“src”，只有这种方式对我有用。

Answer 9

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

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

和

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

Answer 10

我不得不使用 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 11

如果有人在做了所有提到的事情后仍然有这个问题。尝试关闭 VS 代码并重新打开，环顾四周 2 小时后对我有用..

Answer 12

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

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