NPM为什么要在聚合物元素内安装另一个node_modules文件夹，如何解决？

Question

问题

我正在遵循“使用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-input。 paper-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位）

Answer 1

您是否从项目根目录运行npm install @polymer/paper-checkbox？如果从npm install文件夹的根目录运行papaer-checkbox命令，它将从package.json文件读取它的依赖项文件夹并安装它们。