我对TypeScript还不熟悉,我只是试图引入一个从node模块导入的模块。我没有使用webpack或任何其他构建工具,因为我想尽可能保持简单以便理解。
这是我的结构:
/node_modules -- contains node modules I want to import in main.ts
/scripts/ts/main.ts
/scripts/main.js -- the transpiled main.ts file
/index.html -- includes the module script tag for scripts/main.js
/package.json
/tsconfig.json
这是我的 tsconfig.json 文件:
{
"compilerOptions": {
"target": "ES6",
"module": "ES2015",
"strict": true,
"forceConsistentCasingInFileNames": true,
"outDir": "scripts",
"moduleResolution": "Node",
"experimentalDecorators": true
},
"$schema": "https://json.schemastore.org/tsconfig",
"exclude": [],
"include": [
"scripts/ts/**/*"
]
}
我的main.ts文件有以下导入:
import { css, html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
main.ts文件被转译为main.js成功加载,但是我遇到了以下错误:
Uncaught TypeError: Failed to resolve module specifier "lit". Relative references must start with either "/", "./", or "../".
导入语句被逐字转换。在转换后的文件中,它们看起来完全相同,因此我想问题在于模块路径错误:浏览器不知道“lit”在“node_modules / lit”中,当我手动更改转换后文件中的路径为 ../node_modules/lit/index.js,那么就会出现另一个错误。
Uncaught TypeError: Failed to resolve module specifier "@lit/reactive-element". Relative references must start with either "/", "./", or "../".
我想这是一个由其他lit模块在层次结构中导入的模块。 基本上我的导入路径没有被正确转译,我不知道该怎么办。 任何帮助都将是极好的!
html
文件长什么样子?它只是从scripts/main.js
导入吗?如果是这样,我认为问题在于 Typescript 无法将你的依赖项捆绑成一个单独的文件,这就是为什么它不起作用的原因。这通常是 webpack 的用武之地。已经有类似的问题关于避免使用 webpack:https://dev59.com/questions/I1YN5IYBdhLWcg3wNFt4 - cdimitroulas<script type="module" src="scripts/main.js">
。嗯...我没想到它需要将它捆绑在一个单独的文件中。模块可以引用其他模块,只需要知道在哪里查找对吧?我会看一下链接的,谢谢! - frezqUncaught TypeError: Failed to resolve module specifier "@lit/reactive-element". Relative references must start with either "/", "./", or "../".
我没有直接使用@lit/reactive-element
,所以这一定是依赖图中较低层次的导入。无论如何,你是对的,我现在记得ES6导入需要有绝对或相对路径 - "普通节点导入"根本不起作用,这些需要以某种方式进行转换,不仅适用于我的模块,还适用于依赖图中的每个其他模块。非常感谢您花时间讨论这个问题。 - frezq