Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/428.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/java/398.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 导入不带模块绑定器的web组件_Javascript_Polymer_Web Component_Polymer 3.x - Fatal编程技术网

Javascript 导入不带模块绑定器的web组件

Javascript 导入不带模块绑定器的web组件,javascript,polymer,web-component,polymer-3.x,Javascript,Polymer,Web Component,Polymer 3.x,我试图按照使用web组件的说明进行操作。我用npm安装--save@polymer/paper button安装了polymer paper按钮,将下面的内容添加到我的index.html中,并用vscode的live服务器打开了它。但是我得到一个控制台错误,它说:uncaughttypeerror:未能解析模块说明符“@polymer/iron-flex-layout/iron-flex-layout.js”。相对引用必须以“/”、“/”或“./”开头。我想解决这个问题,而不使用像webpac

我试图按照使用web组件的说明进行操作。我用
npm安装--save@polymer/paper button
安装了polymer paper按钮,将下面的内容添加到我的index.html中,并用vscode的live服务器打开了它。但是我得到一个控制台错误,它说:
uncaughttypeerror:未能解析模块说明符“@polymer/iron-flex-layout/iron-flex-layout.js”。相对引用必须以“/”、“/”或“./”开头。我想解决这个问题,而不使用像webpack这样的模块绑定器

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

...
提高

我发现的一个解决方法是按照以下方法使用:

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


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

我发现的一种解决方法是按照以下方法使用:

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


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

您收到的错误指的是浏览器(即使是支持ES模块的浏览器)无法解析裸模块模块导入(
从“bar”导入foo;

是的,这里:

                           ↓
<script type="module" src="node_modules/@polymer/paper-button/paper-button.js"></script>
要了解更多关于浏览器中的模块以及缺少对裸说明符支持的原因,我推荐Damien Seguin的文章


您不一定需要模块绑定器才能启动应用程序:,Polymer的开发服务器自动解析模块说明符。此外,如果您不想手动配置生成系统,Polymer CLI的
build
命令可能会有所帮助,或者Babel之类的工具可以帮助您在不捆绑的情况下转换导入。

您遇到的错误是指浏览器(即使是支持ES模块的浏览器)无法解析裸模块导入(
从“bar”导入foo;

是的,这里:

                           ↓
<script type="module" src="node_modules/@polymer/paper-button/paper-button.js"></script>
要了解更多关于浏览器中的模块以及缺少对裸说明符支持的原因,我推荐Damien Seguin的文章


您不一定需要模块绑定器才能启动应用程序:,Polymer的开发服务器,自动解析模块说明符。此外,如果您不想手动配置生成系统,Polymer CLI的
build
命令可能会有所帮助,或者类似Babel的工具可以帮助您在不绑定的情况下转换导入有人给了这个人一枚奖章。我在其他研究中错过了<代码>模块<代码>参数。在发送代码包之前,修复所有蹩脚的裸模块语法。传奇。@ Max88请考虑将此标记为已接受的答案,因为这是问题的实际解决方案,而不仅仅是一些理论对话。我想知道为什么它不能开箱即用。事实上,我一直在推迟使用Polymer 3/LitElements,因为这个问题,不再是了。哇……有人给了这个人一枚奖章。在我的另一项研究中,我错过了
?module
参数。在它发送代码包之前,修复了所有糟糕的裸模块语法。传奇。@Ma请考虑将此标记为可接受的答案,因为这是一个实际的解决问题的方法,而不仅仅是一些理论上的对话,为什么它不在方块之外。我实际上已经推迟使用聚合物3 /元素,因为这个问题,不再。