我在小项目here中复制了这个。
所以我有一个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被抛出。使用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/
。我做错了什么?
3条答案
按热度按时间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配置:生成并运行项目:
npm run build && npm start
0yycz8jy2#
您的项目结构是:
所以你的import应该是:
输入
./
后,您的IDE或文本编辑器应该介入并帮助您获得正确的路径,即Visual Studio Code:顺便说一句,Node中的模块解析意味着你需要将
./
放在你的路径中来加载相关的模块。你可以在Node Modules docs中读取模式。你需要符合下面列表中的规则(3)。j8yoct9x3#
由于这仍然是一个问题,我想我应该指出,有一个更简单的npm包称为tscpaths作为使用webpack的替代品,它以非常简单的方式转换您构建的JS导入路径。我实际上发现它被列为resolve-tspaths的替代品,它做了类似的事情,但似乎需要一个非标准的路径前缀,后者功能更丰富,虽然我不需要,但可能对某些人有用。
使用真的很容易,只需安装与
并与
当然,这可以在构建脚本的末尾添加到
package.json
中。