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

Question

聪明人！

我是一个捆绑器初学者，有一个捆绑器斜线依赖问题。

• 在yarn dev run 我收到错误：“找不到模块'@sveltejs/svelte-scroller'...”
• 我有一个工兵/苗条/rollup/yarn-suite
• svelte-scroller-插件

插件默认加载为rollup.config.js中的外部：

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

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

import Scroller from '@sveltejs/svelte-scroller';

//...

<Scroller />

...错误打了我一巴掌。

注意事项

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

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

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

• 由于 svelte-scroller 的目的是与客户端交互相关，我认为它不应该是捆绑包的一部分。

• 当然，网络空间存在相关问题，但我似乎无法找到一个明确的最佳实践示例来说明如何处理这个问题。

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

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

如果错误重新访问另一个依赖项，我只需将其添加到 notExternals-arr。

问题

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

提前致谢！

堆栈

internal/modules/cjs/loader.js:896
  throw err;
  ^

Error: Cannot find module '@sveltejs/svelte-scroller'
Require stack:

    - /.../__sapper__/dev/server/server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:893:15)
    at Function.Module._load (internal/modules/cjs/loader.js:743:27)
    at Module.require (internal/modules/cjs/loader.js:965:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/.../__sapper__/dev/server/server.js:8:16)
    at Module._compile (internal/modules/cjs/loader.js:1076:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:941:32)
    at Function.Module._load (internal/modules/cjs/loader.js:782:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/.../__sapper__/dev/server/server.js'
  ]
}

如果你敢复制

模板

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

插件

yarn add @sveltejs/svelte-scroller

将插件导入 .svelte-component

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

//...

<Scroller />

去

yarn run dev

Answer 1

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

如果dependencies的内容被视为external，传统的做法是将包添加到devDependencies而不是：

yarn add -D @sveltejs/svelte-scroller