Svelte项目 - 图片来自我的手机

今天的越写悦快乐之系列文章为大家带来如何快速开启一个Svelte项目，如何利用HTML、JavaScript和CSS构建Web应用。话说当下流行的Web开源的JavaScript框架当属React、Vue.js和Angular，那么除了这三款框架外，我们别无选择了吗？今天为大家介绍这款框架Svelte，就是其中很有名气的一员，我相信通过的介绍，你会有兴趣进一步了解它，让我们开始探索之旅吧。

介绍

它是什么

Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.

Svelte是一款构建Web应用的新方式，通过它可以将声明式组件高效地编译成JavaScript，并且如外科手术般地更新DOM。

它有什么特点

• 减少代码量
• 无需操作虚拟DOM
• 无需使用状态管理

如何使用

环境要求

• Node 8.0
• JavaScript 或者TypeScript
• VSCode

开启一个新项目

创建项目

我们打开iterm2软件，然后定位到Desktop目录下，执行如下命令：

npx degit sveltejs/template svelte-go

执行完成后切换到svelte-go并使用VSCode打开项目：

cd svelte-go
code -r .

切换编程语言

打开项目后，我们注意到项目的结果如下：

项目结构 - 图片来自我的手机

切换到VSCode的终端页签下，执行以下命令：

node scripts/setupTypeScript.js

执行完成后会自动删除scripts目录。

来个满天星玩玩

打开App.svelte文件，输入以下内容：

<script>
    import { onMount } from 'svelte';

    let characters = ['🥳', '🎉', '✨'];

    let confetti = new Array(100).fill()
        .map((_, i) => {
            return {
                character: characters[i % characters.length],
                x: Math.random() * 100,
                y: -20 - Math.random() * 100,
                r: 0.1 + Math.random() * 1
            };
        })
        .sort((a, b) => a.r - b.r);

    onMount(() => {
        let frame;

        function loop() {
            frame = requestAnimationFrame(loop);

            confetti = confetti.map(emoji => {
                emoji.y += 0.7 * emoji.r;
                if (emoji.y > 120) emoji.y = -20;
                return emoji;
            });
        }

        loop();

        return () => cancelAnimationFrame(frame);
    });
</script>

<style>
    :global(body) {
        overflow: hidden;
    }

    span {
        position: absolute;
        font-size: 5vw;
    }
</style>

{#each confetti as c}
    <span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
{/each}

随后在main.ts文件中加载App.svelte文件并绑定组件，文件内容如下：

import App from "./App.svelte";

const app = new App({
  target: document.body,
});

export default app;

配置文件

我们打开项目的package.json文件看看，就知道这个项目依赖哪些第三方库了，文件内容如下：

{
  "name": "svelte-app",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public",
    "validate": "svelte-check"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^16.0.0",
    "@rollup/plugin-node-resolve": "^10.0.0",
    "rollup": "^2.3.4",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.0",
    "rollup-plugin-svelte": "^7.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "svelte": "^3.0.0",
    "svelte-check": "^1.0.0",
    "svelte-preprocess": "^4.0.0",
    "@rollup/plugin-typescript": "^6.0.0",
    "typescript": "^3.9.3",
    "tslib": "^2.0.0",
    "@tsconfig/svelte": "^1.0.0"
  },
  "dependencies": {
    "sirv-cli": "^1.0.0"
  }
}

看看效果

在项目的终端执行以下命令即可查看项目运行结果：

npm run start

运行结果

如果您阅读过Svelte的官方教程，或许对这一结果不意外，我相信您能静下心来阅读官方的教程，这样有助于你进一步理解Svelte是怎么工作的。

参考

• Svelte

Gif制作工具

• QuickTime Player
• Gifski

个人总结及收获

我们的这篇文章入门了如何使用Svelte构建可交互基于组件的页面，该页面增强了HTML的内容表达的能力，更让我们可以借助JavaScript或者TypeScript来提升我们的开发体验，构建更加友好卓越的用户体验，提升用户的产品价值，我相信技术带来生产的变革，让我们一起构建无与伦比的用户体验，创造更大的价值。若是我的文章对你有所启发，那将是我莫大的荣幸。希望和您一起精进，成为更好的自己。