简单的绝对导入会导致“找不到模块”错误

Question

我在这里的小项目中复制了此内容。

所以我有一个main.ts看起来像：

import hello from "dm/lib/helper"

hello("Jeff")

而helper.ts在src/lib/herlper.ts看起来像：

export default function hello(name: string) {
    console.log(`Hello ${name}`)
}

很简单 现在到tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
        "dm/*": [
            "./src/*"
        ],
    },
  },
  "include": [
    "src/**/*"
  ]
}

编译/转换工作正常，并弹出了一些Javascript。main.js使用运行npm start会出现类似以下错误：

module.js:549
    throw err;
    ^

Error: Cannot find module 'dm/lib/helper'
    at Function.Module._resolveFilename (module.js:547:15)

我没想到TypeScript会包含dm/我用来引用最终JS中的项目根目录的内容。我究竟做错了什么？

Answer 1

好吧，根据这个已关闭的问题，在 TypeScript 中没有外部工具就不可能使用绝对导入，主要是因为它不会在发出的 JavaScript 中重写您的导入。

在前端项目中，您可以让webpack解析这些导入，但由于我正在做一个 nodejs/electron 项目，所以我这里仍然没有 webpack 设置。

同样有趣的是，VSCode设法在 TypeScript 中使用绝对导入，但他们也在使用 webpack，但我还不知道他们是如何实现这种效果的。如果您知道他们是如何做到这一点的，请随意回答这个问题。

更新

因此，我设法使用webpack在我的 TypeScript/nodejs 项目中启用绝对导入。这绝不是唯一的方法，但它确实有效。

我在这里更新了我的项目代码。以下是一些亮点：

安装这些：

npm install --save-dev webpack webpack-cli webpack-node-externals ts-loader

添加 webpack 配置webpack.config.js：

const path = require("path")
const nodeExternals = require("webpack-node-externals")

module.exports = {
    mode: "development",
    target: "node",
    entry: {
        app: ["./src/main.ts"]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: "ts-loader",
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        alias: {
            dm: path.resolve(__dirname, "src/")
        },
        extensions: [".ts", ".js"]
    },
    output: {
        path: path.resolve(__dirname, "dist/"),
        filename: "main.js"
    },
    externals: [nodeExternals()]
}

构建并运行项目：

npm run build && npm start