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

dojqjjoe  于 2023-04-22  发布在  TypeScript
关注(0)|答案(3)|浏览(370)

我在小项目here中复制了这个。
所以我有一个main.ts,它看起来像:

import hello from "dm/lib/helper"

hello("Jeff")

helper.tssrc/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被抛出。使用npm start运行main.js会出现如下错误:

module.js:549
    throw err;
    ^

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

我没想到TypeScript会包含我在最终JS中用来引用项目根的dm/。我做错了什么?

5f0d552i

5f0d552i1#

根据this closed issue,在TypeScript中不可能使用没有外部工具的绝对导入,主要是因为它不会在发出的JavaScript中重写导入。
在前端项目中,你可以让webpack解析这些导入,但是因为我正在做一个nodejs/electron项目,所以我仍然没有在这里设置webpack。
同样有趣的是,VSCode设法在TypeScript中使用绝对导入,但他们也使用webpack,但我不知道他们是如何实现这种效果的。如果你知道他们是如何做到这一点的,请随时回答这个问题。

更新

所以我设法使用webpack在我的TypeScript/nodejs项目中启用绝对导入。这绝不是唯一的方法,但它有效。
我更新了我的project code here。这里有一些亮点:
安装这些:
npm install --save-dev webpack webpack-cli webpack-node-externals ts-loader
webpack.config.js中添加webpack配置:

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

0yycz8jy

0yycz8jy2#

您的项目结构是:

main.ts
-- lib
   helper.ts

所以你的import应该是:

import hello from './lib/helper';

输入./后,您的IDE或文本编辑器应该介入并帮助您获得正确的路径,即Visual Studio Code:

顺便说一句,Node中的模块解析意味着你需要将./放在你的路径中来加载相关的模块。你可以在Node Modules docs中读取模式。你需要符合下面列表中的规则(3)。

require(X) from module at path Y
1. If X is a core module,
   a. return the core module
   b. STOP
2. If X begins with '/'
   a. set Y to be the filesystem root
3. If X begins with './' or '/' or '../'
   a. LOAD_AS_FILE(Y + X)
   b. LOAD_AS_DIRECTORY(Y + X)
4. LOAD_NODE_MODULES(X, dirname(Y))
5. THROW "not found"
j8yoct9x

j8yoct9x3#

由于这仍然是一个问题,我想我应该指出,有一个更简单的npm包称为tscpaths作为使用webpack的替代品,它以非常简单的方式转换您构建的JS导入路径。我实际上发现它被列为resolve-tspaths的替代品,它做了类似的事情,但似乎需要一个非标准的路径前缀,后者功能更丰富,虽然我不需要,但可能对某些人有用。
使用真的很容易,只需安装与

npm i -D tscpaths

并与

npx tscpaths -p tsconfig.json -s src -o dist

当然,这可以在构建脚本的末尾添加到package.json中。

{

  ...

  "scripts": {
    "build": "tsc; tscpaths -p tsconfig.json -s src -o dist"
  }
}

相关问题