Svelte——简约至上。

GitHub 仓库

为了方便您审阅，我创建了一个小型 Web 应用程序，旨在展示 Svelte 在 Web 开发中最基础层面的价值——它是一款优秀的模板引擎。您可以 fork、clone、运行、复制、使用，也可以尽情嘲笑、摇头叹息等等……总之，尽情享受吧。

我只使用了 Svelte 工具的一小部分来演示组件的复用性。App.svelte、FormInput.svelte 和 Button.svelte 中的代码体现了 Svelte 如何轻松实现组件复用。

注意： 我没有为按钮或表单输入添加任何功能。此应用程序的目的是演示模板功能。此外，该应用程序不具备移动响应式设计。

npx degit dbshanks/devTO-article my-new-app

cd my-new-app && npm install

npm run dev

您可以在这里观看实时演示。

https://dbshanks.github.io/devTO-article

介绍

将会有大量文章和视频教程介绍如何利用 Svelte 的简洁性来创建复杂的概念。

我想进一步简化操作，体验 Svelte 作为设计工具的最基本用法。

并非所有人都需要构建复杂的响应式应用程序，有些人仍然在构建简单的着陆页和通用在线平台。

我们理应拥有代码规范且易于维护的设计。就我提供的代码库中的设计而言，大多数人绝不会使用 React、Vue、Angular 等框架来实现如此小的项目。

Svelte 非常适合这种极简的使用场景。我相信，早在 2015 年，“组件架构”风靡一时，GitHub 上也涌现出大量相关库的时候，我们大多数人就梦想着能拥有这样的组件架构了。

Svelte 保持了极简风格，因为它是一个编译器，在生产构建时会从你的代码库中移除部分代码。像 React、Vue 和 Angular 这样的项目要么是库，要么是完整的框架。而使用 Svelte，我们的应用程序就只是一个与 HTML 连接的精简版 bundle.js 文件。

应用程序

这是我的 Svelte 应用中 SRC 文件夹的结构。我仍然喜欢将 CSS/SCSS 与组件逻辑分离。

这种格式应该还算熟悉，React、Vue 和 Angular 都采用了这种模式。虽然 Svelte 还很新，但我还是想提出一个关于文件夹结构的可靠项目模式或最佳实践概念。

src
├── App.scss
├── App.svelte
├── components
│   ├── Button
│   │   ├── Button.scss
│   │   └── Button.svelte
│   ├── Footer
│   │   ├── Footer.scss
│   │   └── Footer.svelte
│   ├── FormInput
│   │   ├── FormInput.scss
│   │   └── FormInput.svelte
│   └── Navigation
│       ├── Navigation.scss
│       └── Navigation.svelte
└── main.js

添加预处理器支持

如果您想在 Svelte 应用中添加 Sass 或其他预处理器，修改起来非常简单。只需将以下 NPM 包安装到您的 SvelteJS 项目中即可。目前，我只能验证 .sass 或 .scss 文件的兼容性。您可以自行尝试。

npm install svelte-preprocess node-sass

添加以下代码行以替换“rollup.config.js”文件中的插件部分。

    plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file — better for performance
            css: css => {
                css.write('public/bundle.css');
            },
            preprocess: autoPreprocess() // Add the autoPreprocess package to plugins.
        }),

在 `rollup.config.js` 文件顶部的导入语句中添加 `svelte-preprocess`。svelte preprocess 会自动检测 node-sass 包，并在开发和构建过程中使用它。除了少数默认设置外，我没有修改 global.css 文件。

import autoPreprocess from 'svelte-preprocess'; //Add autoPreprocess to import.

现在你可以选择以下两种方法之一：直接在组件中内联样式。

<style lang ="scss">

$primary-color: red;
$secondary-color: blue;

h1 {
 color: $primary-color;
}

h2 {
 color: $secondary-color;
}
</style>

或者，如果您愿意，也可以像我一样，将样式表设置为导入，方法是在组件的样式标签之间导入 Sass 文件。

<style lang="scss">
 @import './componentName.scss';
</style>

概括

人们对 Svelte 及其作为 Web 应用开发首选工具的未来充满期待。正如我在 GitHub 仓库中提供的简单应用所展示的那样，使用 Svelte 启动并运行所需的代码量非常少。

前端设计看似简洁，仅一页。后端则配备了完全响应式的工具，可根据需要进行扩展。作为开发者，我们可以先推送一个简单的应用程序。未来，我们可以根据项目规模需求，进一步开发更复杂的应用程序。

希望我已经成功吸引了一些人去体验 Svelte。

这篇文章的灵感来源于 Dave Ceddia 撰写的关于在 Svelte 中实现 Sass 的文章 ：https://daveceddia.com/svelte-with-sass-in-vscode/