在没有模块捆绑器的情况下导入 Web 组件答案

【问题标题】：Importing web component without module bundler在没有模块捆绑器的情况下导入 Web 组件
【发布时间】：2019-12-06 18:11:16
【问题描述】：

我正在尝试遵循these 使用 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>

【问题讨论】：

标签： javascript polymer web-component polymer-3.x

【解决方案1】：

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

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

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

【讨论】：

哇...有人给这个人一枚奖章。我在其他研究中错过了?module 参数。在向您发送代码包之前修复所有糟糕的裸模块语法。传奇的。 @Max888 请考虑将此标记为已接受的答案，因为这是问题的实际解决方案，而不仅仅是一些关于为什么它不能开箱即用的理论对话。因为这个问题，我实际上一直在推迟使用 Polymer 3 / LitElements，不再。

【解决方案2】：

您遇到的错误是指浏览器（即使是支持 ES 模块的浏览器）无法解析裸模块导入 (import foo from 'bar';)。

是的，在这里：

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

您正在通过相对路径导入，但 paper-button 反过来又通过裸说明符导入其他模块：

paper-button.js:11:1
import '@polymer/iron-flex-layout/iron-flex-layout.js';

要详细了解浏览器中的模块以及缺乏对裸说明符的支持背后的原因，我推荐 Damien Seguin 撰写的 this 文章。

您不一定需要模块捆绑器才能启动应用程序：polymer serve，Polymer 的开发服务器，自动解析模块说明符。此外，如果您不想手动配置构建系统，Polymer CLI 的build 命令可能会有所帮助，或者像 Babel 这样的工具可以帮助您转换无需捆绑的导入。

【讨论】：