Sapper/Svelte/Rollup 外部依赖最佳实践?
Sapper/Svelte/Rollup external dependencies best practice?
聪明人!
我是一个打包机初学者,有一个打包机斜线依赖问题。
- 在
yarn dev run
我收到错误:"找不到模块 '@sveltejs/svelte-scroller'..."
- 我有一个sapper/svelte/rollup/yarn-suite
- svelte-scroller-插件
插件默认加载为外部 rollup.config.js:
{ ..., server: { ..., external: <**package.json-dependencies-arr**> } ... }
当我在 .svelte 组件中使用它时:
import Scroller from '@sveltejs/svelte-scroller';
//...
<Scroller />
...错误打脸
备注
rollup.config.js 与模板 clone
没有变化
如果我从 rollup.config.js 中作为外部加载的 dependencies-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
因为@sveltejs/svelte-scroller
是Svelte组件而不是JS模块,它必须在构建时由Svelte编译器处理,而不是在运行时导入。换句话说,它应该成为您的捆绑包的一部分。
传统的做法是,如果 dependencies
的内容被视为 external
,则改为将包添加到 devDependencies
:
yarn add -D @sveltejs/svelte-scroller
聪明人!
我是一个打包机初学者,有一个打包机斜线依赖问题。
- 在
yarn dev run
我收到错误:"找不到模块 '@sveltejs/svelte-scroller'..." - 我有一个sapper/svelte/rollup/yarn-suite
- svelte-scroller-插件
插件默认加载为外部 rollup.config.js:
{ ..., server: { ..., external: <**package.json-dependencies-arr**> } ... }
当我在 .svelte 组件中使用它时:
import Scroller from '@sveltejs/svelte-scroller';
//...
<Scroller />
...错误打脸
备注
rollup.config.js 与模板 clone
没有变化如果我从 rollup.config.js 中作为外部加载的 dependencies-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
因为@sveltejs/svelte-scroller
是Svelte组件而不是JS模块,它必须在构建时由Svelte编译器处理,而不是在运行时导入。换句话说,它应该成为您的捆绑包的一部分。
传统的做法是,如果 dependencies
的内容被视为 external
,则改为将包添加到 devDependencies
:
yarn add -D @sveltejs/svelte-scroller