在 Svelte 中导入 JS npm 库答案

【问题标题】：Importing a JS npm library in Svelte在 Svelte 中导入 JS npm 库
【发布时间】：2022-01-03 15:45:54
【问题描述】：

我不明白如何在 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' 回复中了解到的，但我显然遗漏了一些东西。

【问题讨论】：

scrapegoat 的 package.json 不应该像错误中的那个，应该是这样的：github.com/peerigon/scrapegoat/blob/master/package.json
@JeffProd 谢谢。我使用了yarn add 而不是npm install，它没有添加额外的元数据，但我得到了同样的错误，这次在"name": "scrapegoat" 行上，分号是一个“意外标记”。

标签： javascript npm svelte

【解决方案1】：

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

【讨论】：

我添加了插件但忘记将其添加到配置中。错误现在消失了。谢谢！我现在在浏览器中收到一个不同的错误：“未定义 fs”。我想那是节点的fs 在浏览器中不可用。
正确，如果它正在访问文件系统，您将无法在 Svelte 组件中使用它，该组件仅在客户端运行。