在 Svelte 中导入 JS npm 库

Question

我不明白如何在 Svelte 中导入随机 npm 库。

以scrapegoat库为例，一个读取CalDAV对象的库。我创建了一个全新的 Svelte 项目：

$ npx degit sveltejs/template my-svelte-project
$ cd my-svelte-project/
$ npm install
$ npm install -D scrapegoat

不确定是否应该将其添加到 devDependencies，但如果不添加，似乎也没有太大区别。现在，在 src/App.svelte 中，我将这一行添加到现有的 <script> 标记中。

import scrapegoat from 'scrapegoat'

运行 npm run dev 抛出以下错误：

[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
node_modules/scrapegoat/package.json (2:9)
1: {
2:   "_from": "scrapegoat@^2.0.0",
            ^
3:   "_id": "scrapegoat@2.0.0",
4:   "_inBundle": false,
Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
    at error (node_modules/rollup/dist/shared/rollup.js:158:30)
    at Module.error (node_modules/rollup/dist/shared/rollup.js:12420:16)
    at Module.tryParse (node_modules/rollup/dist/shared/rollup.js:12823:25)
    at Module.setSource (node_modules/rollup/dist/shared/rollup.js:12726:24)
    at ModuleLoader.addModuleSource (node_modules/rollup/dist/shared/rollup.js:22197:20)

这是我从 Rich Harris' 回复中了解到的，但我显然遗漏了一些东西。

Answer 1

您正在导入的包会导入它自己的 package.json。默认情况下，Rollup 不会处理 JSON 导入，因此您需要安装 json plugin 并将其添加到您的 Rollup 配置中。

在 Svelte 中导入 JS npm 库

Importing a JS npm library in Svelte

javascript

npm

svelte