mirror of
https://github.com/kevin-DL/sapper-template.git
synced 2026-01-11 18:14:27 +00:00
@@ -72,11 +72,11 @@ now
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Using external components with webpack
|
## Using external components
|
||||||
|
|
||||||
When using Svelte components installed from npm, such as [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller.
|
When using Svelte components installed from npm, such as [@sveltejs/svelte-virtual-list](https://github.com/sveltejs/svelte-virtual-list), Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller.
|
||||||
|
|
||||||
Because of that, it's essential that webpack doesn't treat the package as an *external dependency*. You can either modify the `externals` option under `server` in [webpack.config.js](webpack.config.js), or simply install the package to `devDependencies` rather than `dependencies`, which will cause it to get bundled (and therefore compiled) with your app:
|
Because of that, it's essential that the bundler doesn't treat the package as an *external dependency*. You can either modify the `external` option under `server` in [rollup.config.js](rollup.config.js) or the `externals` option in [webpack.config.js](webpack.config.js), or simply install the package to `devDependencies` rather than `dependencies`, which will cause it to get bundled (and therefore compiled) with your app:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install -D @sveltejs/svelte-virtual-list
|
npm install -D @sveltejs/svelte-virtual-list
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script context="module">
|
<script context="module">
|
||||||
export async function preload({ params, query }) {
|
export async function preload({ params, query }) {
|
||||||
// the `slug` parameter is available because
|
// the `slug` parameter is available because
|
||||||
// this file is called [slug].html
|
// this file is called [slug].svelte
|
||||||
const res = await this.fetch(`blog/${params.slug}.json`);
|
const res = await this.fetch(`blog/${params.slug}.json`);
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
|
|
||||||
@@ -61,4 +61,4 @@
|
|||||||
|
|
||||||
<div class='content'>
|
<div class='content'>
|
||||||
{@html post.html}
|
{@html post.html}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user