Question

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

Answer 1

您遇到的错误是指浏览器（即使是支持ES模块的浏览器）也无法解决裸模块导入（cond.wait()）。

是，在这里：

lockMethod()
{
    std::unique_lock<std::mutex> lock(mutex);

    while (!cond)
    { 
        condVar.wait(lock);
    }
}

releaseMethod()
{
    {
     std::unique_lock<std::mutex> lock(mutex);   <--- This line
     cond = true;
    }
    condVar.notify_one();
}

您正在通过相对路径导入，但是import foo from 'bar';反过来是通过裸指定符导入其他模块：

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

要了解有关浏览器中模块的更多信息以及缺少对裸露的说明符的支持的原因，我建议this的文章由Damien Seguin撰写。

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

Answer 2

我发现一种解决方法是改为按照以下方式使用https://unpkg.com/：

chrome.runtime.onMessage.addListener(function(msg){
    if(msg.txt == "execute") {
        doSomething();
    }
});

导入不带模块捆绑器的Web组件

2 个答案: