无需模块捆绑器即可导入 Web 组件

Question

我正在尝试遵循这些使用 Web 组件的说明。我安装了聚合物纸按钮npm install --save @polymer/paper-button，将以下内容添加到我的index.html 中，并使用 vscode 的实时服务器打开它。但我收到控制台错误：Uncaught TypeError: Failed to resolve module specifier "@polymer/iron-flex-layout/iron-flex-layout.js". Relative references must start with either "/", "./", or "../".。我想在不使用像 webpack 这样的模块捆绑器的情况下解决这个问题。

<script type="module" src="node_modules/@polymer/paper-button/paper-button.js"></script>
...
<paper-button raised class="indigo">raised</paper-button>

Answer 1

我发现的解决方法是使用https://unpkg.com/，如下所示：

<script type="module" src="https://unpkg.com/@material/mwc-button@latest/mwc-button.js?module"></script>

注意：您需要将?module参数添加到 URL 末尾，以便 unpkg 修复请求的文件中的裸模块语法，否则它只会返回带有裸模块导入的原始文件。