1

问题

我正在关注“使用 App Toolbox 构建应用程序”教程。我遇到了第 3 步“添加一些元素”的问题,一旦我尝试添加paper-checkbox元素,视图就不会显示。

经过一些试验和错误,我发现node_modules文件夹中有一个额外的文件paper-checkbox夹。这导致视图中断,因此不显示(更多内容见下文)。为什么会发生这种情况,如何解决?

教程链接

https://www.polymer-project.org/3.0/start/toolbox/add-elements

完整的问题详细信息

我使用命令行界面启动项目,按照教程说明运行polymer init并选择。polymer-3-starter-kit我运行以下命令进行安装paper-checkbox

npm install @polymer/paper-checkbox

请注意,我在安装元素后收到以下警告:

npm WARN @babel/plugin-transform-classes@7.0.0-beta.35 requires a peer of @babel/core@7.0.0-beta.35 but none is installed. You must install peer dependencies yourself.

+ @polymer/paper-checkbox@3.0.0-pre.20
added 12 packages from 1 contributor and audited 13720 packages in 27.422s
found 46 vulnerabilities (25 low, 14 moderate, 5 high, 2 critical)
run npm audit fix to fix them, or npm audit for details

我检查了我的node_modules文件夹,我可以看到它paper-checkbox已安装。

到目前为止,当我加载my-new-view它时显示正确,如下所示: 在此处输入图像描述

my-new-view.js但是,当我在paper-checkbox元素 内部添加 import 语句时,import '@polymer/paper-checkbox/paper-checkbox.js';视图无法显示:

在此处输入图像描述

在与另一个项目进行一些代码比较后,我看到paper-checkbox文件夹不匹配(见下面的截图)。它包含一个重复的node_modules文件夹,其中包含一个重复的@polymer文件夹。该聚合物文件夹包含font-robota和其他已包含在顶级聚合物目录中的模块;甚至更多重复的内容。

在此处输入图像描述

此外,在检查网页时,控制台(在 chrome 上)给出以下错误:

Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at Polymer (http://127.0.0.1:8081/node_modules/@polymer/polymer/lib/legacy/polymer-fn.js:43:18)
at http://127.0.0.1:8081/node_modules/@polymer/paper-checkbox/node_modules/@polymer/iron-meta/iron-meta.js:141:1

由于存在重复内容,因此会发生此错误。为了解决这个问题,我只是删除node_modules了复选框元素中的文件夹。

我也尝试安装paper-inputpaper-input需要iron-input. 运行npm install @polymer/paper-input相同的node_modules文件夹后,铁和纸输入元素中都安装了。我删除了这两个文件夹,然后该元素终于起作用了。

为什么 npm 会这样做?我该如何解决?

Github 项目回购

https://github.com/starkindustries/my-first-polymer-app

版本信息

  • Git 版本 2.17.1 (Apple Git-112)
  • NPM 版本 6.4.1
  • 节点版本 v10.10.0
  • 聚合物 CLI 版本 1.8.0
  • Chrome 版本 69.0.3497.100(官方版本)(64 位)
4

1 回答 1

0

你是npm install @polymer/paper-checkbox从项目根目录运行的吗?如果你npm install从文件夹的根目录运行命令papaer-checkbox,它会从它的 package.json 文件中读取它的依赖文件夹并安装它们。

于 2018-09-24T21:24:31.880 回答