我对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