Блог

Главная - Вопросы по программированию - Почему в выводе сборки базового примера SvelteKit используется очень современное ключевое слово import?

Почему в выводе сборки базового примера SvelteKit используется очень современное ключевое слово import?

#rollupjs #sveltekit

Вопрос:

В описании Svelte Рич объяснил, почему важно использовать import ключевое слово для разработки, и я полностью согласен. Он продолжает и говорит, что в производственной сборке используется традиционная упаковка JavaScript:

Это не значит, что мы полностью отказываемся от комплектующих. По-прежнему важно оптимизировать ваше приложение для производства, и SvelteKit использует накопительный пакет, чтобы сделать ваши приложения максимально быстрыми и экономичными (включая такие вещи, как извлечение стилей в статические css-файлы).

Но когда я создаю знаменитый пример npm init svelte@next с адаптером, установленным на узел, я вижу, что в выходном JavaScript по-прежнему используется import ключевое слово на страницах JS, а также используется <link rel="modulepreload" ...> суперсовременный для браузеров, как уже упоминалось. Например, вот выходной HTML-код страницы, созданной для производства index.html :

 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="/favicon.png" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>Home</title>

        

        <link rel="modulepreload" href="/_app/start-331a94d4.js">
        <link rel="modulepreload" href="/_app/chunks/vendor-a4e104ac.js">
        <link rel="modulepreload" href="/_app/pages/__layout.svelte-ad0878a7.js">
        <link rel="modulepreload" href="/_app/pages/index.svelte-49c07d7e.js">
        <link rel="stylesheet" href="/_app/assets/start-61d1577b.css">
        <link rel="stylesheet" href="/_app/assets/pages/__layout.svelte-a06e2686.css">
        <link rel="stylesheet" href="/_app/assets/pages/index.svelte-1ae03b51.css">

        <script type="module">
            import { start } from "/_app/start-331a94d4.js";
            start({
                target: document.querySelector("#svelte"),
                paths: {"base":"","assets":""},
                session: {},
                host: "127.0.0.1:3000",
                route: true,
                spa: false,
                trailing_slash: "never",
                hydrate: {
                    status: 200,
                    error: null,
                    nodes: [
                        import("/_app/pages/__layout.svelte-ad0878a7.js"),
                        import("/_app/pages/index.svelte-49c07d7e.js")
                    ],
                    page: {
                        host: "127.0.0.1:3000", // TODO this is redundant
                        path: "/",
                        query: new URLSearchParams(""),
                        params: {}
                    }
                }
            });
        </script>
    </head>
    <body>
        <div id="svelte">


<header class="svelte-1twf6mk"><div class="corner svelte-1twf6mk"><a href="https://kit.svelte.dev" class="svelte-1twf6mk"><img src="/_app/assets/svelte-logo-87df40b8.svg" alt="SvelteKit" class="svelte-1twf6mk"></a></div>

    <nav class="svelte-1twf6mk"><svg viewBox="0 0 2 3" aria-hidden="true" class="svelte-1twf6mk"><path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" class="svelte-1twf6mk"></path></svg>
        <ul class="svelte-1twf6mk"><li class="svelte-1twf6mk active"><a sveltekit:prefetch href="/" class="svelte-1twf6mk">Home</a></li>
            <li class="svelte-1twf6mk"><a sveltekit:prefetch href="/about" class="svelte-1twf6mk">About</a></li>
            <li class="svelte-1twf6mk"><a sveltekit:prefetch href="/todos" class="svelte-1twf6mk">Todos</a></li></ul>
        <svg viewBox="0 0 2 3" aria-hidden="true" class="svelte-1twf6mk"><path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" class="svelte-1twf6mk"></path></svg></nav>

    <div class="corner svelte-1twf6mk"></div>
</header>

<main class="svelte-1izrdc8">

<section class="svelte-mjk9ig"><h1 class="svelte-mjk9ig"><div class="welcome svelte-mjk9ig"><picture><source srcset="svelte-welcome.webp" type="image/webp">
                <img src="svelte-welcome.png" alt="Welcome" class="svelte-mjk9ig"></picture></div>

        to your new<br>SvelteKit app
    </h1>

    <h2>try editing <strong>src/routes/index.svelte</strong></h2>

    <div class="counter svelte-ltn89m"><button aria-label="Decrease the counter by one" class="svelte-ltn89m"><svg aria-hidden="true" viewBox="0 0 1 1" class="svelte-ltn89m"><path d="M0,0.5 L1,0.5" class="svelte-ltn89m"></path></svg></button>

    <div class="counter-viewport svelte-ltn89m"><div class="counter-digits svelte-ltn89m" style="transform: translate(0, 0%)"><strong style="top: -100%" aria-hidden="true" class="svelte-ltn89m">1</strong>
            <strong class="svelte-ltn89m">0</strong></div></div>

    <button aria-label="Increase the counter by one" class="svelte-ltn89m"><svg aria-hidden="true" viewBox="0 0 1 1" class="svelte-ltn89m"><path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" class="svelte-ltn89m"></path></svg></button>
</div>
</section></main>

<footer class="svelte-1izrdc8"><p>visit <a href="https://kit.svelte.dev" class="svelte-1izrdc8">kit.svelte.dev</a> to learn SvelteKit</p>
</footer>



            
        </div>
    </body>
</html>

Как я могу создать SvelteKit с адаптером узла, с традиционным выводом JavaScript rollupjs в клиентском коде, например, без import ключевого слова?

Ответ №1:

Оказывается, мой вопрос-это запрос функции для SvelteKit.

Это будет сделано после выпуска версии 1.0 SvelteKit.

Спасибо dummdidumm за то, что указал мне на это, пока я открывал дублированный выпуск.

Метки: