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

Question

我正在用 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 网站项目中使用这个组件库，比如 svelte-kit，所以我将它导入到 svelte-kit 中。

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

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

Failed to resolve import "@popperjs/core" from "node_modules/.pnpm/registry.nlark.com+svelte-element-ui@1.3.12/node_modules/svelte-element-ui/packages/util/SveltePopperJs.ts". Does the file exist?

这样的关系：

谁能帮我解决这个问题？

Here is the source

希望您能通过源码找到更多信息。

Answer 1

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

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

首先使用以下方法删除它：npm uninstall @popperjs/core

然后使用以下方式安装它：npm install @popperjs/core （这将把它安装为运行时依赖项）

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

How can I use a Svelte component lib which use other package in it?

components

package

svelte

sveltekit