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

问题描述

聪明的人！

我是一个捆绑器斜杠依赖问题的初学者。

• 在yarn dev run上出现错误：“无法找到模块'@ sveltejs / svelte-scroller'...”
• 我有一个sapper / svelte / 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

解决方法

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

如果将dependencies的内容视为external的常规方式是将包添加到devDependencies：

yarn add -D @sveltejs/svelte-scroller