“babel-plugin-module-resolver”和“tsconfig-paths”有什么不同？

Question

我找到了一个SSR演示（React+typescript+Next.js），它使用了这两个插件。

我很困惑，为什么它需要他们两个？

就我而言，这两个插件做了同样的工作，谁能解释为什么？

配置文件

"paths": {
        "@components/*": [
            "./components/*"
        ],
        "@helper/*": [
            "./helper/*"
        ],
        "@utils/*": [
            "./utils/*"
        ],
        "@interfaces/*": [
            "./interfaces/*"
        ],
        "@api/*": [
            "./pages/api/*"
        ],
        "@serverApi/*": [
            "./server/api/*"
        ],
        "@newscenter/*": [
            "./newscenter/*"
        ],
        "@spotcenter/*": [
            "./spotcenter/*"
        ],
        "@styles/*": [
            "./styles/*"
        ]
    }

.babelrc

 "plugins": [
    [
        "module-resolver",
        {
            "root": ["./"],
            "alias": {
                "@components": "./components",
                "@helper": "./helper",
                "@utils": "./utils",
                "@interfaces": "./interfaces",
                "@api": "./pages/api",
                "@serverApi": "./server/api",
                "@newscenter": "./newscenter",
                "@spotcenter": "./spotcenter",
                "@styles": "./styles"
            }
        }
    ]
]

Answer 1

这是一个老问题。 但是对于将来遇到此问题的任何人，我想我会更新。

jsconfig.json（或 tsconfig.json，如果您使用的是 typescript）通知您的 IDE 您正在使用这些别名。 例如，vscode 或 intellij 将知道在哪里查看您的导入是否正常工作

babel 的模块解析器插件告诉服务器从这些别名导入文件