如何使用其中使用其他包的 Svelte 组件库？答案

【问题标题】：How can I use a Svelte component lib which use other package in it?如何使用其中使用其他包的 Svelte 组件库？
【发布时间】：2021-07-19 00:31:58
【问题描述】：

我正在用 svelte 制作一个组件库“svelte-element-ui”，这个库使用了一些其他的包，比如 popperJs。

当我将组件库发布到 npmjs 时，package.json 文件如下：

{
  "name": "svelte-element-ui",
  "files": [
    "src/index.ts",
    "packages",
    "static",
    "dist"
  ],
  "devDependencies": {
    "@popperjs/core": "^2.9.1",
  },
  "svelte": "src/index.ts",
  "main": "src/index.ts",
  "typings": "types/index.d.ts",
  "author": "koory1st",
  "license": "MIT",
}

我想在其他一些像 svelte-kit 这样的 svelte 网站项目中使用这个组件库，所以我将它导入到 svelte-kit 中。

import { SeuSubMenu } from 'svelte-element-ui';

但是当我访问该页面时出现错误：

无法解析从“node_modules/.pnpm/registry.nlark.com+svelte-element-ui@1.3.12/node_modules/svelte-element-ui/packages/util/SveltePopperJs”导入“@popperjs/core”。 ts”。文件存在吗？

这样的关系：

谁能帮我解决这个问题？

Here is the source

希望您可以通过来源找到更多信息。

【问题讨论】：

您需要向我们展示您是如何导入第三方组件或库的

标签： package components svelte sveltekit

【解决方案1】：

我认为问题在于您使用 @popperjs/core 作为开发依赖项，尝试将其声明为依赖项

...,
"dependencies": {
    "@popperjs/core": "^2.9.1",
},...

首先使用删除它：npm uninstall @popperjs/core

然后使用：npm install @popperjs/core （将其安装为运行时依赖项）安装它

【讨论】：

非常感谢。