编译 Typescript 后的问题路径答案

【问题标题】：Issues paths after compile Typescript编译 Typescript 后的问题路径
【发布时间】：2021-05-19 03:14:22
【问题描述】：

我有下一个 tsconfig：

"compilerOptions": {
        "module": "commonjs",
        "moduleResolution": "node",
        "newLine": "LF",
        "outDir": "./output/",
        "target": "es2015",
        "sourceMap": false,
        "declaration": false,
        "lib": [
            "es2017",
            "dom"
        ],
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": false,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "baseUrl": ".",
        "paths": {
            "@src/*": ["src/*"],
            "@scripts/*": ["src/scripts/*"],
            "@helpers/*": ["src/helpers/*"],
            "@types/*": ["src/types/*"],
            "@entity/*": ["src/types/entity/*"],
            "@enum/*": ["src/types/enum/*"],
            "@request/*": ["src/types/request/*"],
        }
    },

我想请您注意块路径。

我使用 "@enum/MyClass" 来导入 MyClass。而且我有绝对正确的建筑代码。但编译后，我的 js 代码导入路径为 "@enum/MyClass" 而不是 "src/types/entity/MyClass"。

如何获取路径正确的 js 代码？当然，我可以取消所有变量路径，但这是不好的方式。

【问题讨论】：

标签： node.js angular typescript typescript2.0

【解决方案1】：

您在上面描述了预期的“路径”行为。此参数不解决您的 JS 工件中的模块映射的编译过程。

来自官方 TypeScript repo 的类似问题： https://github.com/microsoft/TypeScript/issues/10866

为了添加上下文，“路径”是为与加载器一起使用而设计的允许重新映射，这与 Node.js 的 require() 不同。预期的行为是让 TypeScript 解析各种模块的类型信息各种加载器使用的ID，不重写模块ID。基本上它没有做你认为的事情。在我看来也不应该，它应该只具有反映解决策略的能力装载机。

所以，我可以建议您为您的加载程序使用其他流行的插件，例如 https://www.npmjs.com/package/tsconfig-paths 用于打字稿编译器或 https://www.npmjs.com/package/tsconfig-paths-webpack-plugin 用于您的 webpack。

【讨论】：