使用 Web 组件时无法解析模块说明符

Question

我已经从 NPM 安装了 @tokens-studio/configurator 包。但是，当我按照建议导入它时，出现错误：

Failed to resolve module specifier "@tokens-studio/configurator". 
Relative references must start with either "/", "./", or "../".

这是我导入包的 HTML 文件：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="module">
      import '@tokens-studio/configurator';
    </script>
</head>

<body>
    <main>
        <configurator-element>
            <div style="height: 100%" slot="monaco-config"></div>
            <div style="height: 100%" slot="monaco-output"></div>
        </configurator-element>
    </main>
</body>

知道我做错了什么吗？

Answer 1

看起来您正在尝试直接从浏览器使用 ESM，而无需任何捆绑步骤。进口分为三种类型：

绝对进口：

import 'https://example.com/shapes/circle.js'

相对进口：
```
import './circle.js'
```
裸进口：
```
import '@tokens-studio/configurator'
```
；

如果您熟悉 Node.js，那么这三个都受支持。对于像您正在使用的那样的裸导入，Node.js 会查看从当前目录开始的

node_modules

但是，在浏览器领域，裸导入的概念没有任何意义。浏览器不知道应该在哪里寻找这个特定模块，因为它无法访问本机操作系统。

这就是 import-maps 的用武之地。现在所有浏览器都支持它，并且它是在 here 定义的。你可以这样定义它（实际路径可能会根据你的服务器和

main

包的

export

文件定义的

package.json

/

@tokens-stuido/configurator

而改变）：

<script type="importmap">
  {
    "imports": {
      "@tokens-studio/configurator": "http://localhost:8080/node_modules/@tokens-studio/configurator/index.js",
    }
  }
</script>

您还需要某种服务器来提供所需的文件

node_modules

。

第二种更常见的选择是简单地使用模块包，如 Webpack、Vite 或 Parcel。

使用 Web 组件时无法解析模块说明符

问题描述投票：0回答：1

1个回答

最新问题

使用 Web 组件时无法解析模块说明符

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1