为什么SvelteKit基本示例生成输出使用非常现代的导入关键字？
为什么SvelteKit基本示例生成输出使用非常现代的导入关键字？
提问于 2021-09-06 06:47:07
在Svelte的描述中，里奇解释了为什么在开发中使用import关键字很重要，我完全同意。他继续说，在生产构建中，它使用的是传统的JavaScript打包：
这并不是说我们要抛弃所有的流浪汉。优化您的应用程序仍然是至关重要的，SvelteKit使用汇总使您的应用程序尽可能快速和精简(包括将样式提取到静态.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关键字？
回答 1
Stack Overflow用户
发布于 2021-09-21 17:55:27
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69070188
复制相关文章
相似问题
腾讯云开发者
