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

Posted 2023-03-28

【中文标题】Sapper/Svelte/Rollup 外部依赖最佳实践？

【英文标题】：Sapper/Svelte/Rollup external dependencies best practice?

【发布时间】：2021-01-11 22:33:04

【问题描述】：

聪明人！

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

在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。

问题

考虑到 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

【问题讨论】：

嗨@Kiiim，这是一个非常好的问题，除了一点：你应该尝试问一个问题；最好是他的回答不涉及个人意见。这使问题更容易回答和切中要害，这也可以使其他有类似问题的人受益。

@guzmonne 是的，当您的问题被束缚时，很难保持简洁。但我同意，已编辑:)

【参考方案1】：

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

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

yarn add -D @sveltejs/svelte-scroller

【讨论】：

在所有回复中，这显然是最突出的！笑话不谈，将所有类似的非 js 模块装扮成 devDeps 显然是可行的。是的，让编译器完成它的工作似乎是合乎逻辑的。当采用这种方法前进时，“传统”这个词也让我内心平静。谢谢@Rich先生。