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

Question

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

node.jsyarnpkgsvelterollupjssapper

3

聪明的人们！

我是一个刚开始使用bundler的新手，遇到了一个关于bundler和依赖项的问题。

在运行yarn dev run时，我遇到了错误："Cannot find module '@sveltejs/svelte-scroller'..."
我使用的是sapper/svelte/rollup/yarn套件
svelte-scroller插件

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

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

当我在.svelte组件中使用它时：

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

//...

<Scroller />

...the error slaps my face.

Notes

rollup.config.js is unchanged from the template clone
If I remove the plugin from the dependencies-arr loaded as externals in rollup.config.js the error goes away.
...which tells me that rollup shouldn't load the dependency as an external (assuming the only goal is to make the specified error vanish).
And since svelte-scroller's purpose here is client-interaction-related, I presume it shouldn't be a part of the bundle either way.
Of course cyberspace has related issues, but I can't seem to find a clear best practice example on how to handle this.

My current workaround is therefore:

 // 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数组中。

问题

考虑到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 组件中

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

//...

<Scroller />

go

yarn run dev

- Kiiim

嗨 @Kiiim，这是一个非常好的问题，除了一个点：你应该尽量提出一个单一的问题；最好是那些答案不涉及个人观点。这样可以使问题更容易回答并且直截了当，也能让其他有类似问题的人受益。 - undefined

@guzmonne 是的，当你的问题感觉像是被锁链束缚时，保持简洁确实很难。但我同意，已经编辑好了 :) - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rich Harris · Accepted Answer

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

如果将dependencies的内容视为external，传统的做法是将该软件包添加到devDependencies中。

yarn add -D @sveltejs/svelte-scroller