typescript tsconfig 路径不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50679031/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
tsconfig paths not working
提问by jacob
I'm trying to do something very similar to the jquery path examplein the documentation, but TS keeps throwing TS2307(webpack compiles fine):
我正在尝试做一些与文档中的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?
],
Changing baseUrlto "."and updating includesand pathsmakes no difference (@clientcontinues to work and @suircontinues to not work).
更改baseUrl为"."和更新includes并paths没有什么区别（@client继续工作并@suir继续不工作）。
Changing "@suir"to "@suir/"or "@suir/*"(and appending /*to its value) also makes no difference.
更改"@suir"为"@suir/"or "@suir/*"（并附/*加到其值）也没有区别。
The reason I'm doing this is to simplify my imports (I'm specifying them explicitly instead of pulling named exports from the bundle in order to reduce my vendor bundle size—saves about 1 MB):
我这样做的原因是为了简化我的导入（我明确指定它们而不是从包中提取命名导出以减少我的供应商包大小——节省大约 1 MB）：
import Button from 'semantic-ui-react/dist/commonjs/elements/Button'; // works
import Button from '@suir/elements/Button'; // not found
回答by jacob
I have no idea why this is now working on the eleventh time I tried (yet didn't the first 10), but the /*seems to be the secret sauce, and the example in the docs is apparently pointing to a specific file (and the file extension is omitted).
我不知道为什么这在我尝试的第 11 次（但不是前 10 次）中起作用，但是这/*似乎是秘诀，并且文档中的示例显然指向特定文件（以及省略文件扩展名）。
{
"compilerOptions": {
"baseUrl": "./src",
"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/**/*",
],
}
回答by Hugheth
This might help someone - if you use tscor a tool to compile your TS code to a separate folder such as dist, tsconfig-pathsregister does NOTwork out the box. I have a tsconfig.json like this:
这可能帮助别人-如果你使用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/**/*"]
}
You can see that a path such as shared/someFolder/someScriptwill resolve correctly to the sharedfolder in my project, which is a load cleaner than lots of relative ../../../../paths.
您可以看到诸如此类的路径shared/someFolder/someScript将正确解析到shared我的项目中的文件夹，这比许多相对../../../../路径负载更清洁。
However, this was throwing me the error:
但是，这给我带来了错误：
? 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'
I did a bit of digging and found that the tryPathsarray produced by tsconfig-paths has absolute URLs relative to the project/cwd base, rather than the build distfolder.
我做了一些挖掘，发现tryPathstsconfig-paths 生成的数组具有相对于project/cwd 基础的绝对 URL ，而不是构建dist文件夹。
This seems obvious in retrospect. There doesn't seem to be an obvious way to handle this with the library, so I have solved this by copying the tsconfig.jsoninto the distfolder and running node -r tsconfig-paths/register main.js.
回想起来，这似乎很明显。似乎没有明显的方法可以用库来处理这个问题，所以我通过将 复制tsconfig.json到dist文件夹中并运行node -r tsconfig-paths/register main.js.
