Sapper/Svelte/Rollup 外部依赖项最佳实践？

Question

聪明的人！

\n

我\xe2\x80\x99m 是一个捆绑器初学者，有一个捆绑器斜杠依赖问题。

\n

\n
• 我收到yarn dev run错误：“找不到模块 \'@sveltejs/svelte-scroller\'...”
\n
• 我有一个 sapper/svelte/rollup/yarn-suite
\n
• svelte- scroller-插件
\n

\n

该插件默认在 rollup.config.js 中作为外部加载：

\n

{ ..., server: { ..., external: <**package.json-dependencies-arr**> } ... }\n

\n

当我在 .svelte-component 中使用它时：

\n

import Scroller from \'@sveltejs/svelte-scroller\';\n\n//...\n\n<Scroller />\n

\n

...这个错误打了我的脸。

\n

笔记

\n

\n

• rollup.config.js 与模板克隆相比没有变化

  \n
\n

• 如果我从在 rollup.config.js 中作为外部加载的依赖项 arr 中删除插件，错误就会消失。

  \n
\n

• ...这告诉我汇总不应将依赖项作为外部加载（假设唯一的目标是使指定的错误消失）。

  \n
\n

• 由于 svelte-scroller 的用途与客户端交互相关，因此我认为无论如何它都不应该成为捆绑包的一部分。

  \n
\n

• 当然，网络空间也有相关的问题，但我似乎找不到关于如何处理这个问题的明确的最佳实践示例。

  \n
\n

• 因此，我当前的解决方法是：

  \n

   // in rollup.config.js\n import pkg from \'./package.json\';\n\n // filter out those "not external dependencies" \n const notExternals = [\'@sveltejs/svelte-scroller\'];\n const externals = Object.keys(pkg.dependencies).filter(plugin =>\n     notExternals.some(not => not === plugin) ? false : true\n );\n\n export default {\n     // ...,\n     server: {\n         // ...,\n         // bundle filtered externals (along with default built in modules)\n         external: externals.concat(require(\'module\').builtinModules),\n     },\n     // ...\n }\n

  \n
\n

\n

如果错误再次出现在另一个依赖项中，我只需将其添加到 notExternals-arr 中。

\n

问题

\n

\n
1. 考虑到 sapper/svelte/rollup-setup，在处理导致类似错误的基于客户端的插件时，这种方法是最佳实践吗？
\n

\n

提前致谢！

\n

堆

\n

internal/modules/cjs/loader.js:896\n  throw err;\n  ^\n\nError: Cannot find module \'@sveltejs/svelte-scroller\'\nRequire stack:\n\n    - /.../__sapper__/dev/server/server.js\n    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:893:15)\n    at Function.Module._load (internal/modules/cjs/loader.js:743:27)\n    at Module.require (internal/modules/cjs/loader.js:965:19)\n    at require (internal/modules/cjs/helpers.js:88:18)\n    at Object.<anonymous> (/.../__sapper__/dev/server/server.js:8:16)\n    at Module._compile (internal/modules/cjs/loader.js:1076:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)\n    at Module.load (internal/modules/cjs/loader.js:941:32)\n    at Function.Module._load (internal/modules/cjs/loader.js:782:14)\n    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {\n  code: \'MODULE_NOT_FOUND\',\n  requireStack: [\n    \'/.../__sapper__/dev/server/server.js\'\n  ]\n}\n

\n

如果你敢复制

\n

模板

\n

npx degit "sveltejs/sapper-template#rollup" <app-name>\n

\n

插入

\n

yarn add @sveltejs/svelte-scroller\n

\n

将插件导入到 .svelte-component

\n

<script>\n   import Scroller from \'@sveltejs/svelte-scroller\';\n</script>\n\n//...\n\n<Scroller />\n

\n

去

\n

yarn run dev\n

\n

Answer 1

因为@sveltejs/svelte-scroller是 Svelte 组件而不是 JS 模块，所以它必须在构建时由 Svelte 编译器处理，而不是在运行时导入。换句话说，它应该是您的捆绑包的一部分。

如果 的内容dependencies被视为，则执行此操作的传统方法external是将包添加到devDependencies：

yarn add -D @sveltejs/svelte-scroller