【发布时间】：2021-11-03 06:52:47
【问题描述】：
在description of Svelte 中，Rich 解释了为什么使用import 关键字进行开发很重要，我完全同意。他继续说，在生产构建中它使用传统的 JavaScript 打包：
这并不是说我们完全放弃了打包工具。为生产优化您的应用程序仍然很重要，SvelteKit 使用 Rollup 使您的应用程序尽可能快速和精简（包括将样式提取到静态 .css 文件中）。
但是，当我从 npm init svelte@next 构建著名的示例并将适配器设置为节点时，我看到输出 JavaScript 仍然在页面 JS 中使用 import 关键字，并且还使用了超级现代的 <link rel="modulepreload" ...>如前所述，对于浏览器。例如，这是为生产而构建的index.html 页面的输出 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 关键字？
【问题讨论】：