Tsconfig 路径不工作

我试图做一些与文档中的 Jquery 路径示例非常相似的事情，但 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/*"(并将 /*附加到其值)也没有区别。

我这样做的原因是为了简化我的导入(我明确地指定它们，而不是从 bundle 中提取命名的导出，以便减少供应商的 bundle 大小ーー节省大约1MB) :

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


import Button from '@suir/elements/Button'; // not found
109597 次浏览
小开
最佳答案

我不知道为什么在我第十一次尝试的时候这样做(前十次没有) ，但是 /*似乎是秘密武器，文档中的例子显然指向一个特定的文件(文件扩展名被省略了)。

{
"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/**/*",
],
}
小开

这可能会有帮助的人-如果你使用 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-path 生成的 tryPaths数组具有相对于 project/cwd 基的绝对 URL，而不是构建 dist文件夹。

inspect screengrab

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

小开

即使基本 URL 已经设置，也要检查它是否位于默认值“ ./”上 那么应该改为“ src”，只有这种方式为我工作。

小开

正如 艾米丽 · 翟在评论中提到的，这有时只需要重新启动语言服务器。

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

重新开始后，一切开始为我工作。

小开

如果你正在使用 Webpack和 ts-loader，并且在尝试了上面的所有答案之后仍然无法工作，你可能需要在你的 Webpack配置文件的解析部分使用一个插件 -Tsconfig-path-webpack-plugin; 所以它会遵循你在编译 tsconfig.json文件时放入的路径。

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

小开

就像 pkestikar 说的，Tsconfig-path-webpack-plugin可以帮助解决这个问题

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'一起工作。

小开

我也确实为 .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"],
}
小开

开箱即用，它不能与 tsc 或 ts- 节点一起工作。 但是对于某些包(tsc-alias & module-alias) ，它可以工作。 不需要安装 babel 或 webpack。

// tsconfig.json


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

和 TSC 合作

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

yarn add --dev tsc-alias

并将其添加到您的 build 命令中

"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));
小开

我不得不用 Babel 来编译代码

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

然后在 build 命令上

"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'
]

}

小开

如果有人在做了所有提到的事情之后仍然有这个问题。尝试关闭 VS 代码并重新打开，这对我来说工作2小时后，看看周围。.

小开

对于我自己来说，经过多次的尝试和错误，解决方案很简单。

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

还有

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

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

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

经过反复试验，我终于知道，它的运作方式和我们想象的不一样。

//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
小开

如果您正在使用 Vite，您应该安装 Vite-tsconfig-path。

npm i vite-tsconfig-paths --save-dev

然后，使用 vite.config.ts模块注入 vite-tsconfig-paths

import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'


export default defineConfig({
plugins: [tsconfigPaths()],
})

进行这些更改后，您可能需要重新启动 Vite 和/或 TS 服务器。

小开

尝试在 tsConfig.json 中添加 CompileOptions 中的 follow 属性:

“ baseUrl”: “。”

在我的情况下工作。

小开

确保提供的路径是正确的。它将抛出错误“ module and its decations not found”。


提交答案