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

【问题标题】：what is different between 'babel-plugin-module-resolver' and 'tsconfig-paths'?“babel-plugin-module-resolver”和“tsconfig-paths”有什么不同？
【发布时间】：2020-07-07 19:00:50
【问题描述】：

我找了一个SSR的demo（React+typescript+Next.js），用到了这两个插件。

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

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

tsconfig.json

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

【问题讨论】：

两者的最终结果相同，但其中一个用于 Typescript，另一个用于 Javascript

标签： javascript reactjs typescript babeljs next.js

【解决方案1】：

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

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

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

【讨论】：