>我尝试在脚本模块中使用vaadin-text-field，但失败并显示以下消息
未捕获的类型错误：无法解析模块说明符"@vaadin/vaadin-lumo-styles/color.js"。相对引用必须以"/"、"./"或"../".
现在我知道 ES6 不支持"裸"导入说明符 但是有没有办法在不入侵组件导入的情况下使其工作。 我的意思当然是本地
这是我的代码：
<!doctype html>
<html>
<head>
<!-- Polyfills only needed for Firefox and Edge. -->
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
</head>
<body>
<script type="module">
import {PolymerElement, html} from './node_modules/@polymer/polymer/polymer-element.js';
import './node_modules/@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
class MyElement extends PolymerElement {
static get properties() { return { }}
static get template() {
return html`
<vaadin-text-field></vaadin-text-field>
`;
}
}
customElements.define('my-element', MyElement);
</script>
<my-element></my-element>
</body>
</html>
注意：我正在使用服务器来提供文件而不是聚合物CLI
我发现使用polymer serve提供文件是解决问题的最快方法。
根据聚合物的文件
浏览器在导入中只接受一种模块说明符 语句：必须为完全限定的 URL 或路径 以/、./或 .. 开头。/.这适用于导入 特定于应用程序的元素和模块：
但是，当您编写可重用组件时，这很有挑战性， 并且你想要导入使用 npm 安装的对等依赖项。路径 可能因组件的安装方式而异。所以聚合物 支持使用节点样式命名导入说明符
其中@polymer/聚合物是 npm 包的名称。(这种风格 说明符有时称为"裸模块说明符"。
这些模块说明符需要先转换为路径，然后才能 提供给浏览器。聚合物 CLI 可以在构建时转换它们 时间，聚合物开发服务器可以在 运行时，因此无需生成步骤即可测试代码。许多第三方 构建工具(如 WebPack 和 Rollup(也支持命名模块。